:root {
            --amarelo: #f2c100;
            --preto: #1a1a1a;
            --cinza-escuro: #333333;
            --cinza-claro: #f4f4f4;
            --branco: #ffffff;
            --cinza-top: #2c2c2c;
        }

        html { scroll-behavior: smooth; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Roboto', sans-serif; color: var(--preto); line-height: 1.6; overflow-x: hidden; position: relative; }
        h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; text-transform: none; font-weight: 600; line-height: 120%; }
        h2 { font-size: 36px; }
        h1 span, h2 span, h3 span { color: var(--amarelo); }
        .container { width: 90%; max-width: 1200px; margin: 0 auto; }
        .btn-mais { display: inline-block; border-radius: 30px; padding: 10px 30px; border: 2px solid #ddd; background: var(--branco); text-decoration: none; color: #000 !important; font-size: 13px; font-weight: 600; transition: 0.3s; margin-top: 15px; text-transform: none; }
        .btn-mais:hover { background: var(--amarelo); color: #000 !important; border-color: var(--amarelo); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

        
        .hanging-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0; 
            display: flex;
            justify-content: space-between; 
            padding: 0 5%; 
            z-index: 9999; 
            pointer-events: none; 
        }

        .hanging-logo {
            width: 110px; 
            height: auto;
            transform-origin: top center; 
            animation: pendulo 3s ease-in-out infinite alternate;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.4)); 
            margin-top: -25px; 
        }

        .hanging-logo:nth-child(2) {
            animation-delay: 1s; 
        }

        @keyframes pendulo {
            0% { transform: rotate(3deg); }
            100% { transform: rotate(-3deg); }
        }

        @media (max-width: 768px) {
            .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
            .social-footer { justify-content: center; }
            .hanging-logo { width: 65px; margin-top: -15px; }
            .hanging-wrapper { padding: 0 10px; }
        }

        
        .top-bar {
            background: var(--cinza-top);
            color: #fff;
            padding: 2px 0;
            font-size: 11px;
        }
        .top-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
        }
        .social-top-bar { display: flex; gap: 15px; }
        .contact-top-bar { display: flex; gap: 20px; }
        .top-bar a { color: #ccc; text-decoration: none; transition: 0.3s; font-size: 13px; }
        .top-bar a:hover { color: var(--amarelo); }

        
        header { 
            background: var(--branco); 
            padding: 0; 
            border-bottom: none; 
            position: sticky; 
            top: 0; 
            z-index: 1000; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        
        .header-content { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 0 0 10px 0; 
        }
        
        .logo img { 
            height: 85px; 
            display: block; 
            margin-top: 0; 
        }
        
        /* MENU DESKTOP */
        nav ul { display: flex; list-style: none; gap: 20px; }
        nav a { text-decoration: none; color: #333; font-weight: 600; font-size: 13px; transition: 0.3s; }
        nav a:hover { color: var(--amarelo); }
        
        .header-right { display: flex; align-items: center; gap: 15px; }
        .btn-orcamento { background: var(--branco); border: 2px solid #ddd; padding: 10px 30px; border-radius: 30px; font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; color: #000 !important; transition: 0.3s; display: inline-block; }
        .btn-orcamento:hover { background: var(--amarelo); border-color: var(--amarelo); color: #000 !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }


        /* MENU MOBILE ICON */
        .menu-toggle { display: none; font-size: 24px; cursor: pointer; color: var(--preto); }

        /* HERO */
        .hero { 
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('imgs/bgd.png');
            background-size: cover; 
            background-position: center center;
            background-repeat: no-repeat;
            height: 600px; 
            display: flex; 
            align-items: center; 
            color: var(--branco);
        }
        .hero h1 { font-size: 40px; margin-bottom: 10px; text-shadow: 2px 2px 10px rgba(0,0,0,0.6); max-width: 520px; text-transform: none; }
        .hero p { font-size: 18px; font-weight: 300; margin-bottom: 30px; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); max-width: 520px; }
        .hero-pills { display: flex; gap: 15px; flex-wrap: wrap; }
        .pill { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); padding: 12px 25px; border-radius: 30px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(8px); transition: 0.3s; }
        .pill:hover { background: var(--amarelo); color: #000; border-color: var(--amarelo); }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 25px;
        }
        .btn-hero-primary,
        .btn-hero-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: none;
            text-decoration: none;
            transition: 0.3s;
            border: 2px solid transparent;
        }
        .btn-hero-primary {
            background: var(--amarelo);
            color: #000;
            border-color: var(--amarelo);
            box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        }
        .btn-hero-primary:hover {
            background: #d1a600; /* Amarelo mais escuro */
            color: #000;
            border-color: #d1a600;
        }
        .btn-hero-secondary {
            background: transparent;
            color: #fff;
            border-color: rgba(255,255,255,0.3);
        }
        .btn-hero-secondary:hover {
            background: transparent;
            color: #fff;
            border-color: var(--amarelo);
        }

        /* BARRA DE SERVIÇOS */
        .services-bar { background: var(--cinza-escuro); color: var(--branco); padding: 30px 0; }
        .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
        .service-item h3 { font-size: 18px; margin-bottom: 5px; }
        .service-item a { color: var(--amarelo); font-size: 10px; font-weight: 600; text-decoration: none; }

        /* NOSSOS SERVIÇOS */
        .nossos-servicos { 
            background: var(--cinza-claro); 
            padding: 0 0 80px 0; 
            margin-top: 0; 
        }
        .nossos-servicos h2 { 
            text-align: center; 
            margin-bottom: 10px; 
            padding-top: 60px; 
        }
        .nossos-servicos-subtitle {
            text-align: center;
            font-size: 14px;
            color: #666;
            max-width: 620px;
            margin: 0 auto 40px auto;
        }
        .timeline-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 20px; 
            margin-top: 40px; 
        }
        .timeline-card { 
            background: var(--branco); 
            padding: 30px 20px; 
            text-align: left; 
            border-radius: 10px; 
            position: relative; 
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        }
        .icon-box { 
            width: 60px; 
            height: 60px; 
            margin: 0 0 20px 0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border-radius: 50%; 
        }
        .timeline-card i { 
            font-size: 26px; 
            color: var(--preto); 
            margin-bottom: 0; 
        }
        .c1, .c2, .c3, .c4 { 
            background: var(--amarelo); 
            border: none;
        }
        .timeline-card strong {
            display: block;
            font-size: 14px;
            margin-bottom: 8px;
            color: var(--cinza-escuro);
        }
        .timeline-card p {
            font-size: 13px;
            color: #555;
        }
        .number-bg { 
            font-size: 32px; 
            font-weight: 600; 
            color: rgba(0,0,0,0.04); 
            margin-top: 15px; 
        }
        
        .years-row { display: flex; justify-content: space-around; margin-top: 40px; position: relative; }
        .years-row::before { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background: #ccc; z-index: 1; }
        .year-circle { width: 70px; height: 70px; background: #fff; border: 2px solid; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; z-index: 2; position: relative; }
        .y1 { border-color: #8bc34a; color: #8bc34a; }
        .y2 { border-color: #ff9800; color: #ff9800; }
        .y3 { border-color: #9c27b0; color: #9c27b0; }
        .y4 { border-color: #3f51b5; color: #3f51b5; }

        /* QUEM SOMOS */
        .quem-somos { padding: 80px 0; background: var(--branco); }
        .flex-row { display: flex; align-items: flex-end; gap: 50px; }
        .quem-somos .flex-row { align-items: stretch; }
        .side-img { flex: 1; display: flex; }
        .side-img img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover;
            border-radius: 12px; 
            display: block;
        }
        .side-text { flex: 1.2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
        .side-text h2 { margin-bottom: 20px; }
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
        .stats-item strong { display: block; font-size: 36px; color: var(--amarelo); font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1; margin-bottom: 5px; }
        .stats-item p { font-size: 13px; color: #555; margin: 0; }

        /* POR QUE ESCOLHER A TORK */
        .porque-tork { 
            background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('imgs/ponte tork dupla viga.png');
            padding: 100px 0; color: #fff; background-size: cover; background-position: center; background-attachment: fixed;
        }
        .porque-layout { display: flex; gap: 60px; align-items: center; justify-content: space-between; }
        .porque-highlights { flex: 1; }
        .highlight-item { display: flex; gap: 20px; margin-bottom: 35px; align-items: flex-start; }
        .hi-icon { width: 55px; height: 55px; background: var(--amarelo); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; font-size: 22px; flex-shrink: 0; box-shadow: 0 4px 15px rgba(242,193,0,0.4); }
        .highlight-item h4 { margin-bottom: 5px; font-size: 16px; font-weight: 600; color: #fff; }
        .highlight-item p { font-size: 13.5px; color: #ccc; line-height: 1.6; margin: 0; }
        .porque-content { flex: 1; max-width: 520px; }
        .porque-content h2 { margin-bottom: 20px; font-size: 40px; }
        .porque-content p { font-size: 15px; margin-bottom: 30px; color: #eee; line-height: 1.7; }

        /* ASSISTA */
        .assista { padding: 80px 0; }
        .assista .flex-row { align-items: center; }
        .video-box { background: #eee; height: 300px; width: 100%; display: flex; align-items: center; justify-content: center; font-weight: 600; border: 1px solid #ddd; border-radius: 8px; }

        /* DEPOIMENTOS */
        .depoimentos { background: linear-gradient(135deg, #111, #2a2a2a); padding: 100px 0; color: #fff; text-align: center; border-top: 1px solid #333; }
        .depo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
        .depo-item { background: #1a1a1a; border-radius: 12px; padding: 40px 30px; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-top: 3px solid var(--amarelo); position: relative; transition: 0.3s; }
        .depo-item:hover { transform: translateY(-10px); background: #222; }
        .depo-icon { font-size: 30px; color: rgba(242, 193, 0, 0.15); position: absolute; top: 30px; right: 30px; }
        .depo-stars { color: var(--amarelo); font-size: 14px; margin-bottom: 15px; display: flex; gap: 4px; }
        .depo-item p.depo-text { font-size: 14.5px; font-style: italic; color: #ddd; line-height: 1.7; margin-bottom: 30px; }
        .depo-author { display: flex; align-items: center; gap: 15px; }
        .depo-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #444; }
        .depo-author-info strong { display: block; font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 3px; }
        .depo-author-info span { display: block; font-size: 12px; color: #888; }

        /* CONTATO */
        /* CONTATO */
        .contato { background: #fff; padding: 100px 0; color: var(--preto); position: relative; overflow: hidden; border-top: 1px solid #eee; }
        .contato::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--amarelo); }
        .contato-layout { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
        .contato-info { flex: 1; }
        .contato-info h2 { font-size: 42px; margin-bottom: 20px; color: var(--preto); }
        .contato-info h2 span { color: var(--amarelo); }
        .contato-info p { font-size: 15.5px; color: #555; line-height: 1.7; margin-bottom: 40px; max-width: 480px; }
        .contact-methods { display: flex; flex-direction: column; gap: 30px; }
        .method-item { display: flex; align-items: center; gap: 20px; }
        .method-item i { width: 55px; height: 55px; background: #fff; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--amarelo); transition: 0.3s; flex-shrink: 0; }
        .method-item:hover i { background: var(--amarelo); color: #000; border-color: var(--amarelo); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .method-item h4 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; font-weight: 600; }
        .method-item p { font-size: 18px; color: var(--preto); font-weight: 600; margin: 0; }
        
        .contato-form { flex: 1; max-width: 520px; width: 100%; }
        .form-card { background: #fff; padding: 50px 40px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 1px solid #eaeaea; border-top: 5px solid var(--amarelo); width: 100%; box-sizing: border-box; }
        .form-card h3 { margin-bottom: 30px; font-size: 26px; color: var(--preto); text-align: center; }
        .input-group { margin-bottom: 20px; text-align: left; }
        .input-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #444; }
        .input-group input, .input-group select { width: 100%; padding: 15px 15px; border: 1px solid #ddd; background: #fdfdfd; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-size: 15px; outline: none; transition: 0.3s; color: #000; box-sizing: border-box; }
        .input-group select { appearance: none; cursor: pointer; background: #fdfdfd url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 15px center; }
        .input-group input:focus, .input-group select:focus { border-color: var(--amarelo); background: #fff; box-shadow: 0 0 0 3px rgba(242,193,0,0.15); }
        
        .btn-enviar { border-radius: 12px; background: var(--amarelo); color: #000; border: none; padding: 18px 40px; font-weight: 600; font-size: 16px; cursor: pointer; width: 100%; transition: 0.3s; margin-top: 10px; box-shadow: 0 4px 15px rgba(242,193,0,0.3); box-sizing: border-box; }
        .btn-enviar:hover { background: #d1a600; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(242,193,0,0.5); }


        /* FOOTER */
        footer { background: linear-gradient(135deg, #111, #2a2a2a); padding: 70px 0 20px 0; color: #fff; border-top: 5px solid var(--amarelo); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; align-items: start; }
        .footer-col h4 { font-size: 17px; margin-bottom: 20px; font-weight: 700; color: #fff; }
        .footer-col p { font-size: 14px; margin-bottom: 12px; line-height: 1.6; color: #ccc; }
        .footer-col ul { list-style: none; padding: 0; margin: 0; }
        .footer-col ul li { margin-bottom: 12px; }
        .footer-col a { color: #ccc; text-decoration: none; font-weight: 500; font-size: 14px; transition: 0.3s; }
        .footer-col a:hover { color: var(--amarelo); text-decoration: none; }
        .footer-col i { color: var(--amarelo) !important; }
        .social-footer a { font-size: 22px; margin-right: 15px; color: var(--amarelo); transition: 0.3s; }
        .social-footer a:hover { color: #fff; }
        .copyright-text { text-align: center; font-size: 13px; font-weight: 500; margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; color: #888; }

        /* EFEITOS */
        .hidden { opacity: 0; filter: blur(5px); transform: translateY(40px); transition: all 0.9s ease-out; }
        .show { opacity: 1; filter: blur(0); transform: translateY(0); }
        
        /* BOTÃO WHATSAPP FLUTUANTE */
        .whatsapp-float {
            position: fixed; width: 60px; height: 60px; bottom: 25px; right: 25px;
            background-color: #25d366; color: #fff; border-radius: 50px; text-align: center; font-size: 32px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.3); z-index: 9999; display: flex; align-items: center; justify-content: center;
            transition: all 0.3s ease; text-decoration: none; animation: pulse-zap 2s infinite;
        }
        .whatsapp-float:hover { background-color: #128c7e; color: #fff; transform: scale(1.1); animation: none; }
        @keyframes pulse-zap { 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); } }

        
        /* CATALOGO / EQUIPAMENTOS TABS */
        .equipamentos-tabs { padding: 80px 0; background: #f9f9f9; }
        .equipamentos-tabs h2 { text-align: center; margin-bottom: 30px; }
        .tabs-buttons { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
        .tab-btn { background: transparent; border: 2px solid #ddd; padding: 10px 25px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: 0.3s; font-size: 14px; color: var(--preto); }
        .tab-btn.active, .tab-btn:hover { background: var(--amarelo); border-color: var(--amarelo); color: #000; }
        .tab-content { display: none; animation: fadeIn 0.5s; }
        .tab-content.active-tab { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .grid-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
        .produto-card { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: 0.3s; border: 1px solid #eee; }
        .produto-card:hover { border-color: var(--amarelo); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .img-container { width: 100%; height: 220px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; border-bottom: 1px solid #f5f5f5; }
        .img-container img { max-width: 100%; max-height: 100%; object-fit: contain; z-index: 2; transition: 0.3s; }
        .produto-card:hover .img-container img { transform: scale(1.05); }
        .img-container i { font-size: 50px; color: #f0f0f0; position: absolute; z-index: 1; }
        .produto-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
        .produto-info h3 { font-size: 14px; margin-bottom: 10px; color: var(--preto); border-bottom: 1px solid #eee; padding-bottom: 10px; min-height: 45px; display: flex; align-items: center; font-weight: 600; }
        .produto-info p { font-size: 13px; color: #666; margin-bottom: 20px; flex-grow: 1; line-height: 1.5; }
        .btn-orcamento-card { text-align: center; background: transparent; color: var(--preto); padding: 10px; border-bottom: 2px solid var(--amarelo); font-weight: 600; font-size: 12px; text-decoration: none; transition: 0.3s; display: block; letter-spacing: 0.5px; }
        .btn-orcamento-card:hover { background: var(--amarelo); color: #000; border-bottom-color: #000; }

        /* RESPONSIVIDADE GERAL */
        @media (max-width: 768px) {
            .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
            .social-footer { justify-content: center; }
            .flex-row, .services-grid, .timeline-grid, .depo-grid { flex-direction: column; text-align: center; }
            .header-content { flex-direction: row; align-items: center; justify-content: space-between; position: relative; }
            .logo { flex: 1; text-align: left; }
            .logo img { height: 60px; margin-left: 5px; }
            .top-bar-content { flex-direction: column; gap: 5px; padding: 6px 0; }
            .contact-top-bar { align-items: center; justify-content: center; }
            .services-grid, .timeline-grid, .depo-grid, .footer-grid { grid-template-columns: 1fr; gap: 30px; }
            .footer-grid { text-align: center; }
            
            .hero { height: auto; padding: 100px 0; }
            .hero h1 { font-size: 34px; }
            .hero-pills { justify-content: center; }
            .porque-content { margin: 0 auto; text-align: center; }
            .porque-layout { flex-direction: column; }
            .porque-highlights .highlight-item { text-align: left; }
            .contato-layout { flex-direction: column; text-align: center; }
            .contato-info p { margin-left: auto; margin-right: auto; }
            .method-item { justify-content: center; }
            .method-item i { margin: 0; }
            .form-card { padding: 40px 20px; }
            .contato-layout { flex-direction: column; text-align: center; }
            .contato-info p { margin-left: auto; margin-right: auto; }
            .method-item { justify-content: center; }
            .method-item i { margin: 0; }
            .form-card { padding: 40px 20px; }
            
            .menu-toggle { display: block; position: absolute; right: 20px; top: 25px; }
            nav { width: 100%; display: none; margin-top: 10px; }
            nav ul { flex-direction: column; background: #fff; padding: 20px; border-top: 1px solid #eee; gap: 15px; }
            nav.active { display: block; }
            
            .header-right { display: none; }
            .years-row { display: none; }
            
            .side-img { order: 2; margin-top: 30px; }
            .side-text { order: 1; padding-bottom: 0; }
            .quem-somos { padding-bottom: 50px; }
        }