/* ==========================================================================
   1. VARIAVEIS CSS (CSS Custom Properties)
   ========================================================================== */
:root {
    --primary-color: /*#FF550D;*/ /*#ff5b00;*/ #F29305;
    --secondary-color: #6c757d;
    --accent-color: #f90;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --text-color: #333;
    --text-color-light: #fff;
    --body-font: 'Open Sans', sans-serif;
    --heading-font: "Bebas Neue", sans-serif;
    --base-font-size: 16px;
    --border-radius: 28px;
    --box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --transition-speed: 0.3s ease;
    --bg-orange1-to-orange2: linear-gradient(45deg, #f90, #ff6929 96%);
    --bg-orange2-to-orange1: linear-gradient(45deg, #ff4429, #ff6929 96%);
    --bg-gray-to-white: radial-gradient(circle, rgba(255, 255, 255, 1) 30%, rgba(237, 237, 237, 1) 64%, rgba(249, 249, 249, 1) 100%);
}

/* ==========================================================================
   2. RESET BÁSICO E ESTILOS GLOBAIS
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--base-font-size);
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed);
}

a:hover, a:focus {
    color: #e68a00;
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.75em;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }

p {
    margin-bottom: 1em;
}

ul {
    list-style: none;
}

/* ==========================================================================
   3. UTILITÁRIOS E CLASSES AUXILIARES
   ========================================================================== */
.container {
    width: 90%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-light { background-color: var(--light-color); }
.bg-dark { background-color: var(--dark-color); color: var(--text-color-light); }
.bg-dark h2, .bg-dark p { color: var(--text-color-light); }
.bg-dark a { color: var(--accent-color); }
.bg-dark a:hover, .bg-dark a:focus { color: #e68a00; outline-color: var(--accent-color); }

.text-center { text-align: center; }

.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;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 10px;
    z-index: 10000;
    transition: top 0.3s ease-in-out;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   4. COMPONENTES PRINCIPAIS DO LAYOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1. HEADER (CABEÇALHO DO SITE)
   -------------------------------------------------------------------------- */
.site-header {
    background-color: rgba(255,255,255,0.95); 
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-top: 3px solid var(--primary-color);
    transition: background-color var(--transition-speed), 
                box-shadow var(--transition-speed),
                transform 0.4s ease-in-out,
                opacity 0.3s ease-in-out;
}

.site-header.scrolled {
    background-color: rgba(255,255,255,0.95);
    background-color: #f3f3f3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.20);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.site-header.header-hidden-near-end {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out, visibility 0s linear 0.4s;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 88px;
    width: auto;
    cursor: pointer;
    transition: transform var(--transition-speed);
}
.logo img:hover, .logo img:focus {
    transform: scale(1.03);
    transition: transform var(--transition-speed);

}


/* 4.1.1. NAVEGAÇÃO PRINCIPAL (HEADER) */
.main-navigation .menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem;
}

.nav-menu { display: flex; align-items: center; }
.nav-menu li { margin-left: 25px; }
.nav-link {
    font-weight: 600;
    color: var(--text-color);
    padding: 10px 0;
    position: relative;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width var(--transition-speed); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--primary-color); }

.site-header.scrolled .nav-link {
    color: #333;
}
.site-header.scrolled .nav-link.cta-button-nav {
    color: #fff;
}

/* 4.1.2. BOTÃO CTA NA NAVEGAÇÃO */
.nav-link.cta-button-nav {
  min-width: 130px;
  color: #fff;
  padding: 10px 20px;
  transition: all 0.3s ease;
  outline: none;
  overflow: hidden;
  border-radius: var(--border-radius);
  border: none;
  /*background-color: #343a40;*/
  background-image: var(--bg-orange1-to-orange2);
}
.nav-link.cta-button-nav::after { display: none; }
.nav-link.cta-button-nav:hover, .nav-link.cta-button-nav:focus {
    background-color:var(--primary-color);
    background-image: var(--bg-orange2-to-orange1);
    /*background-image: linear-gradient(45deg, #ff4429, #ff6929 96%);*/
    color: #333;
}
.nav-link.cta-button-nav:hover:after { opacity: 1; }


/* --------------------------------------------------------------------------
   4.2. BREADCRUMB (TRILHA DE NAVEGAÇÃO)
   -------------------------------------------------------------------------- */
.breadcrumb-section { /*background-color:var(--light-color); */padding: 15px 0; /*border-bottom: 1px solid #e0e0e0;*/ /*box-shadow: 0px 5px 5px rgba(0,0,0,0.10);*/ position: relative;z-index: 2;}        
.breadcrumb { list-style: none; padding: 0; margin: 0; font-size: 0.9rem;}
.breadcrumb li { display: inline;  }
.breadcrumb li+li::before { content: "\00BB"; padding: 0 8px; color: var(--secondary-color); }
.breadcrumb li a { color: var(--text-color); text-decoration: none; }
.breadcrumb li a:hover, .breadcrumb li a:focus { text-decoration: underline; color: var(--primary-color); }
.breadcrumb li.active { color: var(--primary-color); font-weight: 600; }

/* --------------------------------------------------------------------------
   4.3. BOTÕES CTA (CALL TO ACTION) GLOBAIS
   -------------------------------------------------------------------------- */
.cta-button, .cta-button-outline {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--border-radius);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: transform var(--transition-speed), background-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
}

.cta-button {
    background-color:var(--primary-color);
    /*background-image: linear-gradient(45deg, #f90, #ff6929 96%);*/
   /* background-image: linear-gradient(45deg, #ff5b00, #f90 96%);*/
    background-image: var(--bg-orange1-to-orange2);
    color: #fff;
    border: 3px solid /*#333;*/ #fff;
    transition: all 0.3s ease;
}

.cta-button:hover, .cta-button:focus {
    /*background-color: #e68a00;*/
    /*background-color: cyan;*/
    background-image: var(--bg-orange2-to-orange1);
    border-color:#fff;
    color: var(--text-color-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(240, 240, 240, 0.3);
}

.cta-button-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.cta-button-outline:hover, .cta-button-outline:focus {
    background-color: var(--primary-color);
    background-image: var(--bg-orange1-to-orange2);
    color: var(--text-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(249, 144, 0, 0.2);
    border: 2px solid #fff;
}

/* ==========================================================================
   5. SEÇÕES ESPECÍFICAS DE PÁGINAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1. HOME PAGE - SEÇÃO HERO (CARROSSEL)
   -------------------------------------------------------------------------- */
.hero-section {
    background-color: #333;
    /*background-image: url('../images/background-gray.png');*/
   /* background-image: var(--bg-gray-to-white);*/
    background-image: url('../images/bg/background-gray.png');
    /*background-image: url('../images/bg/background-orange1.jpg');*/

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: /*var(--text-color);*/ /*#000;*/ var(--text-color-light);
    padding: 60px 0;
    text-align: center;
    display: flex;
    align-items: center;
    min-height: 60vh; 
    position: relative;
    overflow: hidden;
    filter: contrast(100%);
    box-shadow: 0 5px 5px 0px #d9d9d9;

}
.hero-slider-container {
    width: 100%;
    height: 100%; 
    position: relative;
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
    z-index: 1;
}
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 2; 
}
.hero-slide .container.hero-slide-inner-content { display: flex; align-items: center; gap: 30px; width: 100%; flex-wrap: wrap; }
.hero-slide-text-content { flex: 1; min-width: 300px; padding-right: 20px; text-align: left; }
.hero-slide-image-content { flex: 1; min-width: 300px; max-width: 500px; text-align: center; }
.hero-slide-image-content img { max-width: 100%; height: auto; border-radius: var(--border-radius); object-fit: cover; max-height: 400px; margin: 0 auto; }
.hero-slide .hero-title { font-size: 2.8rem; margin-bottom: 0.5em; text-shadow: 1px 1px 2px #000; }
.hero-slide .hero-subtitle { font-size: 1.15rem; margin-bottom: 1.5em; font-weight: 400; text-shadow: 1px 1px 2px #000; }
.hero-nav-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.3); color: white; border: none; font-size: 2rem; padding: 10px 15px; cursor: pointer; z-index: 10; transition: background-color var(--transition-speed); border-radius: var(--border-radius); }
.hero-nav-button:hover, .hero-nav-button:focus { background-color: rgba(0,0,0,0.6); outline: 2px solid var(--accent-color); outline-offset: -2px; }
.hero-nav-button.prev { left: 20px; }
.hero-nav-button.next { right: 20px; }
.hero-slide-indicators { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.hero-slide-indicators button { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.7); cursor: pointer; padding: 0; transition: background-color var(--transition-speed); }
.hero-slide-indicators button:hover, .hero-slide-indicators button:focus { background-color: rgba(255,255,255,0.8); outline: 1px solid var(--accent-color); }
.hero-slide-indicators button.active { background-color: var(--text-color-light); }

/* --------------------------------------------------------------------------
   5.2. HOME PAGE - DEMAIS SEÇÕES (TÍTULOS GERAIS, SERVIÇOS, SOBRE, DEPOIMENTOS, CONTATO)
   -------------------------------------------------------------------------- */
.section-title { text-align: center; margin-bottom: 15px; position: relative; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20%; height: 3px; background-color: var(--primary-color); }
.bg-dark .section-title::after { background-color: var(--accent-color); }
.section-subtitle { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 50px; color: var(--secondary-color); font-size: 1.1rem; }
.bg-dark .section-subtitle { color: rgba(255,255,255,0.8); }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 2fr)); gap: 30px; margin-top: 40px; }
.service-item { background-color: #fff; padding: 30px; border-radius:0; box-shadow: var(--box-shadow); text-align: center; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
.service-item:hover { transform: translateY(-10px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.service-item a { color: var(--text-color); }
.service-item a.cta-button-outline { color: var(--primary-color); }
.service-item a.cta-button-outline:hover { color: var(--text-color-light); }
.service-icon { width: 60px; height: 60px; margin: 0 auto 20px auto; }
.service-item h3 { color: var(--primary-color); margin-bottom: 10px; text-align: center; }

.about-section .about-content { display: grid; grid-template-columns: 2fr 2fr; gap: 10px; align-items: center; }
.about-image img { border-radius: var(--border-radius); box-shadow: var(--box-shadow); }

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.testimonial-item { background-color: var(--light-color); padding: 30px; border-radius: var(--border-radius); border-left: 5px solid var(--primary-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.testimonial-item blockquote p { font-style: italic; margin-bottom: 15px; position: relative; padding-left: 30px; }
.testimonial-item blockquote p::before { content: '\201C'; font-family: Georgia, serif; font-size: 3rem; color: var(--primary-color); position: absolute; left: -10px; top: -10px; opacity: 0.5; }
.testimonial-item cite { display: block; font-weight: 600; color: var(--text-color); margin-top: 10px; text-align: right; }

.contact-section .cta-button { margin-top: 20px; margin-bottom: 20px; background-color: var(--accent-color); border-color: var(--accent-color); color: var(--light-color); }
.contact-section .cta-button:hover, .contact-section .cta-button:focus { background-color: #e68a00; border-color: #e68a00; color: var(--dark-color); box-shadow: 0 6px 15px rgba(255, 153, 0, 0.4); }
.contact-info { margin-top: 20px; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   5.3. LANDING PAGE ESPECÍFICA (EX: FILME STRETCH, FITA PET, ETC.)
   -------------------------------------------------------------------------- */
/* 5.3.1. LANDING PAGE - HERO SECTION (product-hero-section) */
.product-hero-section {
    /*background-color: var(--primary-color);*/ /* Fallback intencional */ 
    /*background-image: url('../images/background-orange1.jpg');*/
    background-color: #f9f9f9;
    background-image: /*#f9f9f9;*/ radial-gradient(circle, rgba(255, 255, 255, 1) 40%, rgba(237, 237, 237, 1) 64%, rgba(249, 249, 249, 1) 100%);
    background-image: url('../images/bg/background-gray3.png');
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    color: /*var(--text-color);*/ #000;
    padding: 60px 0;
    filter: contrast(100%);
    box-shadow: 0 5px 5px 0px #d9d9d9;
    object-fit:contain;
    position: relative;
    z-index: 1;
}
.product-hero-section .container { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; position: relative; z-index: 1; }
.product-hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } 
.product-hero-content { flex: 1; min-width: 300px; text-align: left; position: relative; z-index: 1;  }
.product-hero-content h1 { font-size: 2.8rem; margin-bottom: 20px; /*text-shadow: 1px 1px 2px rgba(0,0,0,0.5);*/ text-shadow: 1px 1px 2px #fff;}
.product-hero-content p.lead { font-size: 1.20rem; margin-bottom: 30px; max-width: none; /*text-shadow: 1px 1px 2px rgba(0,0,0,0.5);*/ text-shadow: 1px 1px 2px #fff; }
.product-hero-content .cta-button { background-color: #f90; border-color: white; color: #fff; display: inline-block; }
.product-hero-content .cta-button:hover { background-color: #333; border-color: white; color: white; } 
.product-hero-image { flex: 1; max-width: 480px; min-width: 300px; text-align: center; position: relative; z-index: 1; }
.product-hero-image img { max-width: 100%; max-height: 310px;height: auto; border-radius: var(--border-radius); margin: 0 auto; }

/* 5.3.2. LANDING PAGE - OUTRAS SEÇÕES (FEATURES, APPLICATIONS, CTA) */
.features-section, .applications-section, .cta-section-lp { padding: 60px 0;} 
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; /*margin-bottom: -170px;*/}

.feature-item { background-color: #f9f9f9; padding: 25px; border-radius: 16px; box-shadow: var(--box-shadow); border: 3px solid #fff; text-align: center; }
.feature-item img {width: 220px;height: auto; margin: 0 auto;  }
.feature-item-icon { font-size: 2.5rem; line-height: 1; display: block; margin: 0 auto 20px auto; color: var(--dark-color); }
.feature-item h3 { color: var(--text-color); font-size: 1.3rem; margin-bottom: 10px; }
.feature-item h3:before { position: relative; content: "\00BB"; padding: 0 10px ; color: var(--primary-color); font-size: 2.5rem; line-height: 2.5rem; top: 5px; padding-left: 0px; }

.applications-section img {max-height: 500px; background-color: #fff; border: 3px solid #fff;}
.applications-section .row .feature-item img {width: 150px;height: auto; margin: 0 auto;  } {/*margin-top: 150px;*/}
.applications-list { list-style: none; margin-left: 20px; font-size: 1rem; }
.applications-list li { margin-bottom: 12px; line-height: 1.6; color: var(--text-color); } 
.applications-list li::before { font-size: 18px;content: "\00BB"; padding: 0 8px; color: var(--primary-color); font-weight: bold;}
.applications-list li strong { color: var(--text-color); font-weight: 600; } 
.applications-columns-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-top: 20px; } 
.applications-section .cta-button-outline { background-color: #f90; background-image: var(--bg-orange1-to-orange2);color: var(--light-color);}
.applications-section .cta-button-outline:hover { background-color: var(--primary-color); background-image: var(--bg-orange2-to-orange1);color: var(--text-color); border-color: #fff;}

.cta-section-lp { background-color: var(--dark-color); color: var(--text-color-light); } 
.cta-section-lp .section-title, .cta-section-lp .section-subtitle { color: var(--text-color-light); }
.cta-section-lp .section-title::after { background-color: var(--accent-color); }
.cta-section-lp .cta-button { background-color: var(--accent-color); color:#fff; border-color: #fff; }
.cta-section-lp .cta-button:hover { background-color: #D9541E; border-color: #fff; }

/* 5.3.3. LANDING PAGE - FORMULÁRIO DE CONTATO (EM SEÇÃO) */
.product-contact-form-section { /* Sem estilos específicos aqui, usa .section-padding e .bg-light */ }
.product-contact-form-header .section-title { /* Herda de .section-title */ }
.product-contact-form-header .section-subtitle { color: var(--light-color); } 
.product-contact-form-wrapper { max-width: 750px; margin: 0 auto; background-color: var(--dark-color); padding: 30px 35px; border-radius: var(--border-radius); }
.form-row { display: flex; flex-wrap: wrap; gap: 20px; }
.form-group-lp { margin-bottom: 20px; flex: 1 1 100%; }
.form-row .form-group-lp { flex: 1 1 calc(50% - 10px); min-width: 250px; }
.form-group-lp label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--text-color); font-size: 0.9rem; } 
.form-group-lp label .required-star { color: var(--primary-color); font-weight: bold; margin-left: 3px; }
.form-group-lp input[type="text"], .form-group-lp input[type="email"], .form-group-lp input[type="tel"], .form-group-lp textarea { width: 100%; padding: 12px 15px; border: 1px solid #ced4da; border-radius: var(--border-radius); font-family: var(--body-font); font-size: 1rem; color: var(--text-color); transition: border-color 0.2s ease, box-shadow 0.2s ease; } 
.form-group-lp input::placeholder, .form-group-lp textarea::placeholder { color: #999; opacity: 1; }
.form-group-lp input:focus, .form-group-lp textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15); }
.form-group-lp textarea { min-height: 100px; resize: vertical; }
.form-group-lp .cta-button { padding: 12px 35px; width: auto; }
.alternative-contact-lp { margin-top: 30px; padding-top: 20px; border-top: 1px dashed #ddd; font-size: 0.95rem; color: var(--secondary-color); } 
.alternative-contact-lp p { margin-bottom: 8px; }
.alternative-contact-lp strong { color: var(--text-color); } 
.alternative-contact-lp a { color: var(--primary-color); font-weight: 500; }
.alternative-contact-lp a:hover { text-decoration: underline; }
.alternative-contact-lp i { margin-right: 6px; }


/* --------------------------------------------------------------------------
   5.4. PRODUCTS PAGE (PÁGINA DE LISTAGEM DE PRODUTOS)
   -------------------------------------------------------------------------- */
/* Cabeçalho para páginas internas como Products, Contact, Location */
.page-header-section { background-color: var(--primary-color); color: var(--text-color-light); padding: 30px 0; text-align: center; background-image: url('../images/bg/background-orange1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.page-header-section h1 { font-family: var(--heading-font); margin-bottom: 0; font-size: 2.5rem; align-items: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.page-header-section p.section-subtitle { text-align: center; margin-top: 10px; margin-bottom: 0px; color: var(--text-color-light); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

/* 5.4.1. PRODUCTS PAGE - LAYOUT COM FILTROS */
.products-page-layout { display: flex; gap: 30px; padding: 40px 0; }
.product-filters-sidebar { flex: 0 0 320px; background-color: #f9f9f9; padding: 20px; border-radius: 10px; height: fit-content; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #ccc; }
.product-filters-sidebar h3 { margin-top: 0; margin-bottom: 20px; font-size: 1.3rem; color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; }
.product-filters-list { list-style: none; padding: 0; margin: 0; }
.product-filters-list li { margin-bottom: 0; }
.product-filters-list a.filter-btn { display: block; padding: 8px 15px; color: var(--text-color); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; font-weight: 700; text-shadow: -2px 0px 1px #fff; min-width: 130px; height: 40px; cursor: pointer; position: relative; outline: none; overflow: hidden; border: none; }
.product-filters-list a.filter-btn:hover, .product-filters-list a.filter-btn.active { background-color: #d3d3d3; color: var(--text-color); }
.product-filters-list a.filter-btn.active { font-weight: 700; }
.product-filters-list a.filter-btn:hover { padding-right: 24px; padding-left:8px; }
.product-filters-list a.filter-btn:hover:after { opacity: 1; right: 0px; }
.product-filters-list a.filter-btn:after { content: "\00BB"; position: absolute; opacity: 0; font-size: 20px; line-height: 40px; display: block; top: 0; right: -10px; transition: 0.4s; background-color: #333; border-left: 5px solid #f90; color: white; padding: 0 15px 0px; text-shadow: none; }

/* 5.4.2. PRODUCTS PAGE - FILTRO MOBILE */
.mobile-filter-trigger-container { display: none; margin-bottom: 20px; }
.mobile-filter-trigger { display: block; width: 100%; padding: 12px 15px; background-color: var(--primary-color); color: var(--text-color-light); border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.2s ease; }
.mobile-filter-trigger:hover { background-color: #003366; }
.mobile-filter-trigger .arrow { margin-left: 8px; display: inline-block; transition: transform 0.3s ease; }
.mobile-filter-trigger.open .arrow { transform: rotate(180deg); }
.mobile-product-filters { display: none; background-color: #f9f9f9; padding: 15px; border-radius: var(--border-radius); margin-top: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.mobile-product-filters.open { display: block; }

/* 5.4.3. PRODUCTS PAGE - ÁREA DE EXIBIÇÃO E CARDS */
.products-display-area { flex: 1; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 4fr)  ); gap: 30px; }
.product-card { background-color: #fff; box-shadow: var(--box-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card.hidden { display: none; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); cursor: pointer; }
.product-card-image { width: 100%; height: 200px; overflow: hidden; background-color: #f9f9f9; }
.product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.product-card:hover .product-card-image img{ transform: scale(1.05); }
.product-card:hover .product-card-content h3 a {color: var(--primary-color);}
.product-card:hover .product-card-content .cta-button-outline {background-color: var(--primary-color);  color: #fff; border: 2px solid #fff;}
.product-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; text-align:center; }
.product-card-content h3 { color: var(--text-color); margin-top: 0; margin-bottom: 10px; font-size: 1.3rem; }
.product-card-content h3 a {color: var(--text-color);}
.product-card-content h3 a:hover { color: var(--accent-color); }
.product-card-content p { font-size: 0.9rem; color: var(--secondary-color); flex-grow: 1; margin-bottom: 15px; }
.product-card-content p a {color: var(--secondary-color); }
.product-card-content .cta-button-outline { align-self:center; margin-top: auto; font-size: 0.85rem; padding: 8px 18px; }

/* --------------------------------------------------------------------------
   5.5. TABELAS ESTILIZADAS
   -------------------------------------------------------------------------- */
.table-responsive-wrapper { width: 100%; overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.foxpack-table { width: 100%; border-collapse: collapse; font-family: var(--body-font); font-size: 0.9rem; color: var(--text-color); margin: 0 auto;margin-top: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.foxpack-table th, .foxpack-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.foxpack-table thead { background-color: var(--dark-color); color: var(--text-color-light); }
.foxpack-table th { font-family: var(--body-font); font-weight: 600; text-transform: capitalize ; letter-spacing: 0.5px; font-size: 0.95rem; border-bottom: 2px solid var(--dark-color); }
.foxpack-table th:not(:first-child), .foxpack-table td:not(:first-child) { text-align: center; }
.foxpack-table tbody tr:nth-child(even) { background-color: var(--light-color); }
.foxpack-table tbody tr:hover { background-color: #e9ecef; }
.foxpack-table td strong { font-weight: 600; color: var(--text-color); font-family: var(--body-font); }
.foxpack-table tbody td:first-child { text-align: left; background-color: #fdf7f0; }
.foxpack-table th:first-child { text-align: left; border-top-left-radius: 16px; }
.foxpack-table th:last-child { border-top-right-radius: 16px; }
.foxpack-table tbody tr:last-child td { border-bottom: none; }
.foxpack-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--border-radius); }
.foxpack-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--border-radius); }


/* ==========================================================================
   6. MODAIS
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1. MODAL FULL SCREEN (Genérico / Overlay e Container Base)
   -------------------------------------------------------------------------- */
.fullscreen-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-color); z-index: 2000; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.fullscreen-modal.modal-open { display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s linear 0s; }
/* Estilos para .modal-content-wrapper (Modal Full Screen Simples / não split) */
.fullscreen-modal:not(.split-screen-modal) .modal-content-wrapper {
    background-color: var(--dark-color);
    padding: 30px 35px;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 650px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.4s ease;
}
.fullscreen-modal:not(.split-screen-modal).modal-open .modal-content-wrapper { transform: scale(1); }

/* Botão de fechar comum a todos os modais que usam esta classe */
/* A classe .modal-close-btn é definida na seção do modal split-screen. */

/* Títulos e subtítulos comuns a modais que usam estas classes */
.modal-title { font-size: 2rem; color: var(--light-color); margin-bottom: 8px; }
.modal-subtitle { font-size: 1rem; color: var(--text-color-light); margin-bottom: 30px; } 
.modal-submit-btn { width: 100%; max-width: 300px; margin: 10px auto 0 auto; display: block; }

/* --------------------------------------------------------------------------
   6.2. MODAL SPLIT-SCREEN ESPECÍFICO
   -------------------------------------------------------------------------- */
.modal-content-wrapper-split { display: flex; width: 100%; max-width: 1100px; height: auto; max-height: 90vh; background-color: transparent; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden; position: relative; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.4s ease, transform 0.4s ease; }
.fullscreen-modal.split-screen-modal.modal-open .modal-content-wrapper-split { opacity: 1; transform: translateY(0) scale(1); }
.modal-close-btn { 
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--secondary-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
}
.modal-close-btn:hover { color: var(--primary-color); }
/* Coluna Esquerda: Informações do Produto */
.modal-product-info-column { flex: 0 0 45%; background-color: var(--dark-color); color: var(--text-color-light); padding: 35px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
.modal-product-logo img { max-height: 88px; margin-bottom: 25px; }
.modal-product-image { width: 100%; max-width: 280px; margin-bottom: 20px; }
.modal-product-image img {width: 100%; height: auto; max-height: 250px; object-fit: contain; border-radius: var(--border-radius);}
.modal-product-info-column h3 { font-family: var(--heading-font); font-size: 1.6rem; color: var(--text-color-light); margin-bottom: 10px; line-height: 1.3; }
.modal-product-desc-text { font-size: 0.9rem; opacity: 0.85; margin-bottom: auto; padding-bottom: 20px; }
.modal-info-footer { margin-top: 20px; font-size: 0.8rem; opacity: 0.7; }
/* Coluna Direita: Formulário */
.modal-form-column { flex: 1; background-color: #f9f9f9; padding: 35px 30px; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.modal-form-column .modal-title { font-size: 1.8rem; margin-bottom: 5px; color: var(--text-color); } 
.modal-form-column .modal-subtitle { font-size: 0.95rem; margin-bottom: 25px; color: var(--secondary-color); } 
.modal-form-column .form-group-lp textarea { /* rows: 3; */ } 
.modal-form-column .modal-submit-btn {width: 100%; font-family: var(--body-font);border-color: #fff;  }
.modal-form-column .modal-submit-btn:hover { width: 100%; font-family: var(--body-font); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }

/* Classe para o body quando qualquer modal está aberto */
body.modal-active {
    overflow: hidden;
}

/* ==========================================================================
   7. FOOTER E NEWSLETTER
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1. FOOTER SIMPLES (GENÉRICO - USADO POR PADRÃO NAS PÁGINAS QUE NÃO TÊM FOOTER ESPECÍFICO)
   -------------------------------------------------------------------------- */
.site-footer { background-color: var(--dark-color); color: rgba(255,255,255,0.7); font-family: var(--body-font); padding: 40px 0; font-size: 0.9rem;}
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;   }
.footer-info p { margin-bottom: 5px; }
.footer-info a { color: rgba(255,255,255,0.9); }
.footer-info a:hover, .footer-info a:focus { color: #f90; outline-color: var(--accent-color); }
.social-links a { margin-left: 15px; display: inline-block; transition: transform var(--transition-speed); }
.social-links a:hover, .social-links a:focus { transform: scale(1.1); outline: none; }
.social-links img { width: 32px; height: 32px; filter: invert(70%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(100%) contrast(90%);}
.social-links a:hover img { filter: invert(80%) sepia(50%) saturate(5000%) hue-rotate(320deg) brightness(100%) contrast(100%);}


/* --------------------------------------------------------------------------
   7.2. NEWSLETTER BANNER (INSPIRED - PODE SER USADO EM VÁRIAS PÁGINAS)
   -------------------------------------------------------------------------- */
.newsletter-banner-foxpack { background-color: #d9d9d9; padding: 40px 0; color: var(--text-color); text-align: center; }
.newsletter-banner-foxpack h2 { font-size: 2rem; margin-top: 0; margin-bottom: 10px; color: var(--text-color); }
.newsletter-banner-foxpack p { font-size: 1.1rem; margin-bottom: 25px; opacity: 0.9; color: var(--secondary-color); }
.newsletter-form-foxpack { display: flex; justify-content: center; align-items: center; gap: 10px; max-width: 550px; margin: 0 auto; }
.newsletter-form-foxpack input[type="email"] { flex-grow: 1; padding: 12px 15px; border: 1px solid #ccc; border-radius: var(--border-radius); font-size: 1rem; background-color: #fff; color: var(--dark-color); }
.newsletter-form-foxpack input[type="email"]::placeholder { color: #888; }
.newsletter-form-foxpack .cta-button { padding: 12px 25px; font-family: var(--body-font); }

/* --------------------------------------------------------------------------
   7.3. FOOTER "INSPIRED" (PODE SER USADO EM VÁRIAS PÁGINAS)
   -------------------------------------------------------------------------- */
.site-footer.footer-foxpack-inspired { background-color: #2C3E50; color: rgba(255,255,255,0.8); padding: 60px 0 20px 0; font-size: 0.9rem; line-height: 1.7; font-family: var(--body-font); }
.footer-grid-foxpack { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px 40px; margin-bottom: 50px; }
.footer-column-foxpack h4 { font-family: var(--heading-font); font-size: 1.15rem; color: var(--text-color-light); margin-top: 0; margin-bottom: 20px; position: relative; padding-bottom:10px; }
.footer-column-foxpack h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--accent-color); }
.footer-logo-foxpack img { max-height: 98px; width: 200px; margin-bottom: 15px; }
.footer-column-foxpack.about-company p { margin-bottom: 15px; font-size: 0.85rem; }
.cta-footer-about { border-color: var(--accent-color) !important; color: var(--accent-color) !important; background-color: transparent !important; padding: 8px 18px !important; font-size: 0.8rem !important; display: inline-block; margin-bottom: 15px; }
.cta-footer-about:hover { background-color: var(--accent-color) !important; color: var(--dark-color) !important; }
.cnpj-foxpack { font-size: 0.8rem; opacity: 0.7; margin-bottom: 15px; }
.footer-utility-links { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.footer-utility-links li { margin-bottom: 8px; }
.footer-utility-links a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-utility-links a:hover { color: var(--accent-color); }
.footer-utility-links i { margin-right: 8px; color: var(--accent-color); width: 16px; }
.footer-column-foxpack.navigation-links ul { list-style: none; padding: 0; margin: 0; }
.footer-column-foxpack.navigation-links li { margin-bottom: 10px; }
.footer-column-foxpack.navigation-links a { color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; }
.footer-column-foxpack.navigation-links a:hover { color: var(--accent-color); padding-left: 5px; }
.footer-column-foxpack.navigation-links i { margin-right: 8px; font-size: 0.7em; opacity: 0.7; }
.contact-list-foxpack { list-style: none; padding: 0; margin: 0 0 20px 0; }
.contact-list-foxpack li { margin-bottom: 10px; display: flex; align-items: center; }
.contact-list-foxpack i { margin-right: 10px; color: var(--accent-color); font-size: 1rem; width: 20px; }
.contact-list-foxpack a { color: rgba(255,255,255,0.8); text-decoration: none; }
.contact-list-foxpack a:hover { color: var(--accent-color); }
.address-foxpack { font-style: normal; font-size: 0.9rem; opacity: 0.9; }
.location-link-footer { color: var(--accent-color) !important; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 5px; }
.location-link-footer:hover { text-decoration: underline !important; }
.social-links-footer { display: flex; gap: 10px; }
.social-icon-foxpack img { width: 30px; height: 30px; filter: brightness(0) invert(1); transition: opacity 0.2s ease; }
.social-icon-foxpack:hover img { opacity: 0.8; }
.footer-bottom-foxpack { text-align: center; padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.footer-bottom-foxpack p { margin: 5px 0; }
.footer-bottom-foxpack a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-bottom-foxpack a:hover { color: var(--accent-color); }

/* --------------------------------------------------------------------------
   7.4. NEWSLETTER STRIP ESPECÍFICA PARA HOME (CLASSES ALTERNATIVAS)
   -------------------------------------------------------------------------- */
.home-newsletter-strip { background-color: var(--dark-color); padding: 30px 0; color: var(--text-color-light); }
.home-newsletter-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.home-newsletter-text { flex-basis: 50%; min-width: 280px; }
.home-newsletter-text h3 { font-family: var(--heading-font); font-size: 1.8rem; color: var(--primary-color); margin-top: 0; margin-bottom: 5px; }
.home-newsletter-text p { margin-bottom: 0; font-size: 0.95rem; opacity: 0.9; }
.home-newsletter-form { display: flex; gap: 10px; flex-basis: 45%; min-width: 280px; }
.home-newsletter-form input[type="email"] { flex-grow: 1; padding: 12px 15px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--border-radius); font-size: 0.9rem; background-color: rgba(255,255,255,0.1); color: var(--text-color-light); }
.home-newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.6); }
.home-newsletter-btn { background-color: var(--primary-color) !important; color: var(--light-color) !important; border: 2px solid var(--primary-color) !important; padding: 12px 20px !important; font-size: 0.9rem !important; font-family: var(--body-font);}
.home-newsletter-btn:hover { background-color: #e68a00 !important; border-color: #e68a00 !important; color: var(--light-color) !important; cursor: pointer; }

/* --------------------------------------------------------------------------
   7.5. FOOTER ESPECÍFICO PARA HOME PAGE (CLASSES ALTERNATIVAS)
   -------------------------------------------------------------------------- */
.home-page-footer { background-color: #1f1f1f; color: #adb5bd; padding: 50px 0 15px 0; font-size: 0.9rem; line-height: 1.6; }
.home-footer-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 30px; margin-bottom: 40px;}
.home-footer-col h4 { position: relative; font-family: var(--heading-font); color: var(--light-color); font-size: 1.25rem; margin-top: 0; margin-bottom: 25px; font-weight: 400; padding-bottom: 10px; }
.home-footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--primary-color); }                 
.home-footer-logo-link img { width: 90%; height: auto; margin-bottom: 15px; }
.home-footer-tagline { font-size: 0.85rem; margin-bottom: 15px; color: #ced4da; padding-bottom:25px; }
.home-footer-cnpj { font-size: 0.75rem; opacity: 0.6; margin-bottom: 20px; }
.home-footer-links ul { list-style: none; padding: 0; margin: 0;}
.home-footer-links li { margin-bottom: 8px; }
.home-footer-links li a { color: #adb5bd; text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; }
.home-footer-links li a:hover { color: var(--primary-color); padding-left: 4px; }
.home-footer-contact p { margin-bottom: 8px; display: flex; align-items: center; }
.home-footer-contact i { margin-right: 10px; color: var(--primary-color); width: 18px; text-align: center; }
.home-footer-contact a { color: #adb5bd; text-decoration: none; }
.home-footer-contact a:hover { color: var(--primary-color); }
.home-footer-maplink { display: inline-block; margin-top: 8px; color: var(--primary-color) !important; font-weight: 600; font-size: 0.85rem; }
.home-footer-maplink:hover { text-decoration: underline; }
.home-footer-social-icons { display: flex; gap: 12px; margin-bottom: 20px; }
.home-footer-social-icons img { width: 28px; height: 28px; filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 0.2s ease; }
.home-footer-social-icons a:hover img { opacity: 1; }
.home-footer-quicklinks-title { margin-top: 20px; }
.home-footer-quicklinks { list-style: none; padding: 0; margin: 0; }
.home-footer-quicklinks li { margin-bottom: 8px; }
.home-footer-quicklinks li a { color: #adb5bd; text-decoration: none; font-size: 0.85rem; }
.home-footer-quicklinks li a:hover { color: var(--primary-color); }
.home-footer-links, .home-footer-social-quick { padding-left: 100px; }
.home-footer-contact { padding-left: 80px; }
.home-footer-bottom-bar { text-align: center; padding-top: 20px; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.home-footer-bottom-bar p { margin: 4px 0; }
.home-footer-bottom-bar a { color: rgba(255,255,255,0.6); text-decoration: none; }
.home-footer-bottom-bar a:hover { color: var(--primary-color); }

/* --------------------------------------------------------------------------
   7.6. BOTÃO FLUTUANTE WHATSAPP (GLOBAL)
   -------------------------------------------------------------------------- */
.whatsapp-float-button { position: fixed; bottom: 20px; right: 20px; background-color: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 999; transition: transform 0.2s ease-in-out; animation-name: pulseEffect; animation-duration: 1.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.whatsapp-float-button:hover {transform: scale(1.1);animation-play-state: paused; }
.whatsapp-float-button img {width: 32px;height: 32px;}
@keyframes pulseEffect {
    0% {transform: scale(1);box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.3); }
    50% {transform: scale(1.05);box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0); }
    100% {transform: scale(1);box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3),0 0 0 0 rgba(37, 211, 102, 0);}
}


/* ==========================================================================
   8. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1. BREAKPOINT: MAX-WIDTH 992px (TABLETS E DESKTOPS MENORES)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    h1 { font-size: 2.4rem; }
    .hero-slide .hero-title { font-size: 2.4rem; }
    .hero-slide .hero-subtitle { font-size: 1.1rem; }
    .hero-slide-image-content { max-width: 400px; }
    .hero-slide-image-content img { max-height: 350px; }
    .section-padding { padding-top: 60px; padding-bottom: 60px; }
    .about-section .about-content { grid-template-columns: 1fr; text-align: center; }
    .about-image { margin-top: 30px; max-width: 400px; margin-left: auto; margin-right: auto; }
    /* Products Page Responsive */
    .products-page-layout { flex-direction: column; }
    .product-filters-sidebar { display: none; }
    .mobile-filter-trigger-container { display: block; }
    .products-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
    /* Landing Page Hero Responsive */
    .product-hero-content h1 { font-size: 2.4rem; }
    .product-hero-content p.lead { font-size: 1.1rem; }
    /* Modal Split-Screen Responsive */
    .modal-content-wrapper-split { flex-direction: column; width: 100%; max-width: 95%; height: auto; max-height: 100vh; overflow-y: auto; border-radius: 0px; box-shadow: none;}
    .modal-product-info-column { display: none; }
    .modal-form-column { flex: 1 1 100%; width: 100%; border-radius: 0px; max-height: none; overflow-y: visible; padding: 40px 25px; background-color: var(--dark-color); color: var(--text-color-light); }
    .modal-content-wrapper-split .modal-close-btn { color: var(--secondary-color); top: 10px; right: 12px; }
    .modal-form-column .modal-title { font-size: 1.6rem; color: var(--text-color-light); }
    .modal-form-column .modal-subtitle { font-size: 0.9rem; margin-bottom: 20px; color: var(--text-color-light); opacity: 0.8; }
    .modal-content-wrapper-split label {display: none;}
    /* Modal Full Screen (Não Split) Responsivo */
    .fullscreen-modal:not(.split-screen-modal) .modal-content-wrapper { max-width: 90%; padding: 25px 20px; margin-top: 20px; margin-bottom: 20px; }
    .fullscreen-modal:not(.split-screen-modal) .modal-title { font-size: 1.7rem; }
    .fullscreen-modal:not(.split-screen-modal) .modal-subtitle { font-size: 0.9rem; margin-bottom: 20px; }
    /* .fullscreen-modal:not(.split-screen-modal) .form-group-lp textarea { rows: 3; } */
}

/* --------------------------------------------------------------------------
   8.2. BREAKPOINT: MAX-WIDTH 768px (MOBILES MAIORES E TABLETS EM RETRATO)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Menu Mobile */
    .main-navigation .menu-toggle { display: block; }
    .nav-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.1); padding: 15px 0; border-top: 1px solid #eee; }
    .nav-menu.active { display: flex; }
    .nav-menu li { margin-left: 0; width: 100%; text-align: center; }
    .nav-link { display: block; padding: 15px 20px; width: 100%; }
    .nav-link::after { display: none; }
    .nav-link.cta-button-nav { margin: 10px auto; display: inline-block; width: auto; }
    /* Títulos e Seções Gerais */
    h1 { font-size: 2rem; }
    .hero-section {min-height: 80vh;padding: 0px 0px 30px 0;}
    .hero-nav-button { font-size: 1.5rem; padding: 8px 12px; }
    .hero-nav-button.prev { left: 10px; }
    .hero-nav-button.next { right: 10px; }
    .hero-slide-indicators { bottom: 15px; }
    .hero-slide .container.hero-slide-inner-content { flex-direction: column-reverse; text-align: center; }
    .hero-slide-text-content { text-align: center; padding-top: 0; padding-right: 0; }
    .hero-slide .hero-title { font-size: 2.2rem; }
    .hero-slide-image-content { max-width: 80%; margin: 0 auto; padding-top: 0; }
    .hero-slide-image-content img { max-height: 250px; object-fit: contain; }
    .services-grid, .testimonials-grid { grid-template-columns: 1fr; }
    /* Landing Page Hero Mobile */
    .product-hero-section .container { flex-direction: column-reverse; text-align: center; padding-top: 0px; }
    .product-hero-content { text-align: center; }
    .product-hero-content h1 { font-size: 2.2rem; }
    .product-hero-image { max-width: 100%; margin: 0 auto; }
    .product-hero-image img { max-width: 85%; }
    /* Products Page Mobile */
    .products-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .product-card-image { height: 180px; }
    .product-card-content h3 { font-size: 1.2rem; }
    /* Landing Page Applications Section Mobile */
    .applications-columns-container { grid-template-columns: 1fr; gap: 0 0; }
    .applications-section .row { flex-direction: column-reverse !important; align-items: center !important; }
    .applications-section .row > div { flex-basis: auto !important; width:100%; }
    .applications-section .row > div[style*="flex: 1.5"] { margin-top: 30px; }
    .applications-section .row img { max-width: 100%; }
    /* Tabelas Mobile */
    .foxpack-table { font-size: 0.85rem; }
    .foxpack-table th, .foxpack-table td { padding: 10px 8px; }
    /* Newsletter e Footers Mobile */
    .newsletter-form-foxpack { flex-direction: column; align-items: stretch; } /* Newsletter "Inspired" */
    .newsletter-form-foxpack .cta-button { width: 100%; margin-top: 10px; }
    .footer-grid-foxpack { grid-template-columns: 1fr; text-align: center; } /* Footer "Inspired" */
    .footer-utility-links li { display: inline-block; margin: 0 10px 10px 10px; }
    .contact-list-foxpack li { justify-content: center; }
    .social-links-footer { justify-content: center; }
    .home-newsletter-content { flex-direction: column; text-align: center; } /* Newsletter Home */
    .home-newsletter-form { width: 100%; max-width: 400px; }
    .home-footer-layout { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: left; } /* Footer Home */
    .home-footer-col { margin-bottom: 20px; }
    .home-footer-logo-link, .home-footer-social-icons { display: flex; justify-content: flex-start; }
    .home-footer-social-icons { margin-bottom: 15px; }
    .home-footer-bottom-bar { text-align: center; }
    .home-footer-links, .home-footer-social-quick { padding-left: 0px; } 
    .home-footer-contact { padding-left: 0px; } 
    .home-footer-col.text-center h4::after { left: 50%; transform: translateX(-50%); } /* Este é o que você adicionou solto */
    
}                     

/* --------------------------------------------------------------------------
   8.3. BREAKPOINT: MAX-WIDTH 480px (MOBILES MENORES)
   (E o breakpoint de 520px que estava aninhado foi integrado aqui)
   -------------------------------------------------------------------------- */
@media (max-width: 520px) { /* Ajustado para 520px para cobrir o aninhado */
    .hero-slide .hero-title { font-size: 1.9rem; }
    .hero-subtitle { font-size: 1rem; } 
    .hero-slide .hero-subtitle { font-size: 1rem; } 
    .section-title { font-size: 1.8rem; }
    .cta-button, .cta-button-outline { padding: 10px 20px; font-size: 0.8rem; }
    .hero-slide-image-content img { max-height: 200px; }
    /* Products Page Ultra Mobile */
    .products-grid { grid-template-columns: 1fr; }
    /* Modal Split-Screen Ultra Mobile */
    .modal-content-wrapper-split { width: 100%; height:100%; border-radius: 0px; }
    .modal-form-column { padding: 70px 30px; overflow: hidden; }
    .modal-form-column .modal-title { font-size: 1.5rem; }
    /* Footer Home Ultra Mobile */
    .home-footer-layout { grid-template-columns: 1fr; text-align: center; }
    .home-footer-col h4::after { left: 50%; transform: translateX(-50%); } /* Sublinhado centralizado */
    .home-footer-logo-link, .home-footer-social-icons, .home-footer-contact p { justify-content: center; }
    .home-footer-contact i { margin-right: 8px;}
    
/* editado por William */
    .product-card { flex-direction: row;}
    .product-card-image {max-width: 160px;}
    .product-card-content .cta-button-outline { align-self:center; margin-top: 0; font-size: 0.85rem; padding: 8px 18px; margin-top:-10px; }
    .product-card-content { padding: 10px;}
    .product-card-content { padding-bottom: 15px;}
    .product-card-content h3{ padding-top: 10px;}

}

/* style.css */

/* ==========================================================================
   X. LANDING PAGE - SEÇÃO DE PRODUTOS RELACIONADOS
   ========================================================================== */
#related-products .section-title {
    margin-bottom: 15px; /* Menor margem para o subtítulo ficar mais próximo */
}
#related-products .section-subtitle {
    margin-bottom: 50px; /* Espaço antes da grade de produtos */
}

/* A classe .products-grid e .product-card já devem estar estilizadas globalmente
   ou na sua seção de "PRODUCTS PAGE". Se não, você pode copiar os estilos de lá.
   Apenas certifique-se que a grade de produtos relacionados se comporte como esperado.
   Exemplo de como .products-grid pode estar:
*/
/*
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.product-card {
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.product-card-image { width: 100%; height: 200px; overflow: hidden; background-color: #f9f9f9;}
.product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.product-card-content h3 { color: var(--primary-color); margin-top: 0; margin-bottom: 10px; font-size: 1.3rem; }
.product-card-content h3 a { color: inherit; text-decoration: none;}
.product-card-content h3 a:hover { color: var(--text-color); }
.product-card-content p { font-size: 0.9rem; color: var(--secondary-color); flex-grow: 1; margin-bottom: 15px; }
.product-card-content p a { color: inherit; text-decoration: none; }
.product-card-content .cta-button-outline { align-self:center; margin-top: auto; font-size: 0.85rem; padding: 8px 18px; }
*/


/* ==========================================================================
   X. LANDING PAGE - SEÇÃO FAQ INTERATIVO
   ========================================================================== */
.faq-section-interactive .section-title {
    margin-bottom: 40px;
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    overflow: hidden; /* Para os cantos arredondados */
}

.faq-accordion-item {
    border-bottom: 1px solid #e0e0e0;
}
.faq-accordion-item:last-child {
    border-bottom: none;
}

.faq-accordion-trigger {
    background-color: #fff;
    color: var(--text-color);
    cursor: pointer;
    padding: 18px 25px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 1.1rem; /* Tamanho da pergunta */
    /*font-weight: 600;*/ /* Ou use sua fonte de títulos aqui com peso normal */
    font-family: var(--body-font); /* Descomente se quiser usar a fonte de títulos */
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.faq-accordion-trigger:hover {
    background-color: var(--light-color);
}

.faq-accordion-trigger .faq-icon {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
    color: var(--primary-color);
}

.faq-accordion-trigger[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg); /* Muda o "+" para "x" */
}
.faq-accordion-trigger[aria-expanded="true"] .fa-plus::before {
    content: "\f068"; /* Font Awesome minus icon - se estiver usando fa-plus */

}


.faq-accordion-panel {
    padding: 0px 25px 0px 25px; /* Padding inicial 0 para transição suave */
   background-color: white;
    overflow: hidden;
    max-height: 0; /* Começa oculto */
   transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Transição suave */
}


.faq-accordion-panel.open {
    /*max-height é definido dinamicamente pelo JS */
    /*padding-top: 15px;*/
    padding-bottom: 25px;
   
}


.faq-accordion-panel p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--secondary-color);
    margin-top: 15px;
    margin-bottom: 15px; /* Remove margem do parágrafo para melhor controle do padding do painel */
}


/* Responsividade para FAQ */
@media (max-width: 768px) {
    .faq-accordion-trigger {
        font-size: 1rem;
        padding: 15px 20px;
    }
    .faq-accordion-panel.open {
        padding-bottom: 40px;
    }
}

#get-quote {

        height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
}

footer .site-footer{
    height: 20vh;
}

.scroll-hidden {
  opacity: 0;
  transform: translateY(20px);
}
.scroll-visible {
  opacity: 1;
  transform: none;
  transition: all 0.3s ease-out;
  will-change: opacity, transform;
}

/*
============================================================================================
testes
#f54a00
--base-color-brand--primary-orange: #ff5138;
--base-color-brand--orange-gradient-c1: #ff4429;
--base-color-brand--orange-gradient-c2: #ff6929;

background-image: linear-gradient(45deg, #ff4429, #ff6929 96%);
background-image: linear-gradient(45deg, var(--base-color-brand--orange-gradient-c1), var(--base-color-brand--orange-gradient-c2) 96%);

background
Shorthand property for setting most background properties at the same place in the style sheet.
Saiba mais
Não mostrar
: radial-gradient(circle, rgba(255, 255, 255, 1) 30%, rgba(237, 237, 237, 1) 64%, rgba(249, 249, 249, 1) 100%)

=============================================================================================
*/