/**

 * ===========================================

 * CONSERVADORA CANÁRIO - FOLHA DE ESTILOS PRINCIPAL

 * ===========================================

 * Desenvolvido por: Juliano Alves de Castro

 * Versão: 2.0

 * Data: 2025

 * Descrição: Estilos completos para o site institucional

 * ===========================================

 */



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

   RESET E CONFIGURAÇÕES BASE

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

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    max-width: 100%;

}



html {

    scroll-behavior: smooth;

    overflow-x: hidden;

    scroll-padding-top: 90px;

}



body {

    font-family: 'Inter', sans-serif;

    line-height: 1.6;

    color: var(--text-primary);

    background-color: #fff;

    overflow-x: hidden;

    width: 100%;

    max-width: 100vw;

    animation: fadeInPage 0.6s ease-out forwards;

    padding-top: 90px; /* Espaço para header fixo */

}



/* Prevenir scroll quando menu mobile estiver aberto */

body.menu-open {

    overflow: hidden;

}



img, video, iframe {

    max-width: 100%;

    height: auto;

}



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

   VARIÁVEIS CSS CUSTOMIZADAS

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

:root {

    /* Cores Primárias */

    --primary-color: #1a1a1a;

    --primary-dark: #000000;

    --secondary-color: #d4af37;

    --accent-color: #b8860b;

    

    /* Cores Douradas */

    --gold: #d4af37;

    --gold-dark: #b8860b;

    --gold-light: #f7e98e;

    

    /* Cores de Texto */

    --text-primary: #1a1a1a;

    --text-secondary: #4a5568;

    --text-muted: #718096;

    

    /* Cores de Fundo */

    --bg-light: #f7fafc;

    --bg-gray: #edf2f7;

    --bg-white: #ffffff;

    

    /* Outras Cores */

    --white: #ffffff;

    --black: #1a1a1a;

    --dark-gray: #2d2d2d;

    --border-color: #e2e8f0;

    --success: #10b981;

    --error: #ef4444;

    

    /* Valores RGB para transparências */

    --primary-color-rgb: 26, 26, 26;

    

    /* Espaçamentos */

    --container-padding: 20px;

    --section-padding: 80px 0;

    

    /* Animações */

    --transition-base: all 0.3s ease;

    --transition-fast: all 0.2s ease;

    --transition-slow: all 0.5s ease;

}



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

   UTILITÁRIOS E CONTAINERS

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

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--container-padding);

}



.btn-center {

    text-align: center;

    margin-top: 2rem;

}



.text-justified {

    text-align: justify;

}



.text-center {

    text-align: center;

}

/* Alinhamento global para páginas específicas */
.page-aligned .section-header,
.page-aligned .page-hero-content,
.page-aligned .content-header,
.page-aligned .intro-text,
.page-aligned .service-detail-text,
.page-aligned .history-section,
.page-aligned .values-section,
.page-aligned .mission-section,
.page-aligned .workforce-section,
.page-aligned .benefits-section,
.page-aligned .process-section,
.page-aligned .additional-services,
.page-aligned .services-section,
.page-aligned .services-overview {
    text-align: center;
}

.page-aligned .text-justified,
.page-aligned .lead-justified {
    text-align: center;
}

.page-aligned .service-card-large,
.page-aligned .service-card-large p,
.page-aligned .service-card p,
.page-aligned .intro-text p,
.page-aligned .service-detail-text p {
    text-align: center;
}

/* Centraliza textos na página de orçamento */
.page-orcamento .section-header,
.page-orcamento .section-title,
.page-orcamento .section-subtitle,
.page-orcamento .faq-section,
.page-orcamento .faq-section .service-card-large,
.page-orcamento .faq-section .service-card-large h3,
.page-orcamento .faq-section .service-card-large p {
    text-align: center;
}

.page-aligned .btn-center,
.page-aligned .service-card-actions,
.page-aligned .cta-section .container,
.page-aligned .map-navigation-buttons {
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Alinha botões "Ver Detalhes" em todos os cards com ações */
.service-card-large {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card-actions {
    margin-top: auto;
}

/* Ícones centralizados dentro dos círculos */
.service-icon,
.service-icon-large,
.feature-icon,
.service-detail-icon,
.stat-icon,
.differential-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon i,
.service-icon-large i,
.feature-icon i,
.service-detail-icon i,
.stat-icon i,
.differential-icon i {
    display: block;
    line-height: 1;
}



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

   TIPOGRAFIA

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

h1, h2, h3, h4, h5, h6 {

    font-weight: 600;

    line-height: 1.3;

    color: var(--text-primary);

    margin-bottom: 1rem;

    letter-spacing: -0.02em;

}



h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }

h2 { font-size: clamp(2rem, 4vw, 2.5rem); }

h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); }

h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }



p {

    color: var(--text-secondary);

    margin-bottom: 1rem;

}



.lead {

    font-size: 1.25rem;

    font-weight: 500;

    color: var(--text-primary);

}



.lead-justified {

    text-align: justify;

}



.btn-center {

    text-align: center;

    margin-top: 2rem;

}



.text-justified {

    text-align: justify;

}



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

   SISTEMA DE BOTÕES

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

.btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 28px;

    border: none;

    border-radius: 8px;

    font-size: 1rem;

    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    transition: var(--transition-base);

    white-space: nowrap;

    text-align: center;

    line-height: 1.2;

    position: relative;

    overflow: hidden;

    transform: translateZ(0);

    --x: 0px;

    --y: 0px;

}



.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);

    transform: skewX(-25deg);

    transition: left 0.8s ease;

}



.btn:hover::before {

    left: 100%;

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    color: var(--white);

    box-shadow: 0 4px 15px rgba(26, 26, 26, 0.3);

    position: relative;

    z-index: 1;

}



.btn-primary::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: -1;

    border-radius: 8px;

    background-image: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);

}



.btn-primary:hover::after {

    opacity: 1;

}



.btn-outline {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--primary-color) !important;

    transition: var(--transition-base);

}



.btn-outline:hover {

    background: var(--primary-color) !important;

    color: var(--white) !important;

    border: 2px solid var(--primary-color) !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.2);

}



/* Botões específicos para hero */

.hero-actions .btn-outline {

    background: rgba(255, 255, 255, 0.1) !important;

    color: var(--white) !important;

    border: 2px solid rgba(255, 255, 255, 0.3) !important;

    backdrop-filter: blur(10px);

}



.hero-actions .btn-outline:hover {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--white) !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

}



.btn-large {

    padding: 18px 36px;

    font-size: 1.1rem;

}



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

   HEADER E NAVEGAÇÃO

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

.header {

    background: var(--white);

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    padding: 15px 0;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000; /* Valor alto para garantir que fique sobre outros elementos */

    transition: all 0.3s ease;

}



.header.scrolled {

    padding: 8px 0;

    box-shadow: 0 5px 20px rgba(0,0,0,0.15);

}



.header.scrolled .logo-img {

    transform: scale(0.9);

}



.header.scrolled .nav-menu a {

    padding: 6px 14px;

}



.header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(to right, var(--gold-dark), var(--gold), var(--gold-dark));

}



.header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1rem 20px;

}



.nav-brand .logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--primary-color);

    font-size: 1.5rem;

    font-weight: 700;

}



.logo-img {

    height: 40px;

    width: auto;

}



.logo-text {

    white-space: nowrap; /* Força o texto a ficar em uma linha */

    font-size: 1.5rem; /* Mantém o tamanho consistente */

    font-weight: 700; /* Mantém o peso da fonte */

}



.logo-icon {

    font-size: 2rem;

}



.nav-menu ul {

    display: flex;

    list-style: none;

    gap: 2rem;

    align-items: center;

}



.nav-menu a {

    color: var(--text-primary);

    text-decoration: none;

    font-weight: 500;

    padding: 8px 16px;

    border-radius: 6px;

    transition: var(--transition-base);

    position: relative;

}



.nav-menu a::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 2px;

    background: var(--gold);

    transition: width 0.3s ease;

}



.nav-menu a:hover::after,

.nav-menu a.active::after {

    width: 80%;

}



/* Dropdown */

.dropdown {

    position: relative;

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    background: var(--white);

    min-width: 250px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    border-radius: 8px;

    padding: 12px 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: var(--transition-base);

}



.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-menu li {

    display: block;

}



.dropdown-menu a {

    display: block;

    padding: 12px 20px;

    border-radius: 0;

    font-size: 0.95rem;

    color: var(--text-primary);

}



.dropdown-menu a:hover {

    background: var(--bg-light);

    color: var(--primary-color);

}



/* Mobile Menu Toggle */

.nav-toggle {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 4px;

    position: relative;

    z-index: 1010;

    width: 30px;

    height: 30px;

    padding: 5px;

    background: transparent;

    border: none;

    outline: none;

    -webkit-tap-highlight-color: transparent; /* Remove highlight on tap for mobile */

}



.nav-toggle span {

    width: 25px;

    height: 3px;

    background: var(--primary-color);

    border-radius: 2px;

    transition: var(--transition-base);

    display: block;

}



/* Estilos específicos para o menu mobile ativo */

.nav-toggle.active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}



.nav-toggle.active span:nth-child(2) {

    opacity: 0;

}



.nav-toggle.active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



/* Garante que o menu mobile seja clicável */

.nav-menu.active {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

}



/* Hero Section */

.hero {

    position: relative;

    min-height: 100vh;

    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%);

    display: flex;

    align-items: center;

    color: var(--white);

    overflow: hidden;

    background-attachment: fixed;

    margin-top: -90px; /* Compensa o padding do body */

    padding-top: 140px; /* Espaço adequado para o header */

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.3);

    z-index: 1;

    backdrop-filter: blur(2px);

}



.hero-content {

    position: relative;

    z-index: 2;

    padding: 60px 0;

    text-align: center;

    width: 100%;

    display: flex;

    justify-content: center;

}



.hero-title {

    font-size: 4rem;

    font-weight: 700;

    margin-bottom: 2rem;

    color: var(--white);

    line-height: 1.2;

    text-align: center;

    width: 100%;

    max-width: 800px;

}



.text-highlight {

    color: var(--gold);

    position: relative;

    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);

    display: inline-block;

    position: relative;

    z-index: 1;

}



.text-highlight::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 30%;

    background: rgba(212, 175, 55, 0.2);

    z-index: -1;

    transform: skew(-10deg);

    display: none; /* Remove o grifo/destaque */

}



.hero-description {

    font-size: 1.3rem;

    margin: 0 auto 3rem auto;

    max-width: 600px;

    color: rgba(255,255,255,0.9);

    line-height: 1.6;

    text-align: center;

    width: 100%;

}



.hero-actions {

    display: flex;

    gap: 1.5rem;

    flex-wrap: wrap;

    justify-content: center;

}



.hero-stats {

    position: relative;

    z-index: 2;

    background: rgba(255,255,255,0.1);

    backdrop-filter: blur(10px);

    border-top: 1px solid rgba(255,255,255,0.2);

    padding: 2rem 0;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    text-align: center;

}



.stat-item {

    color: var(--white);

}



.stat-number {

    font-size: 3rem;

    font-weight: 700;

    color: var(--gold);

    margin-bottom: 0.5rem;

    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.2);

}



.stat-label {

    font-size: 1.1rem;

    opacity: 0.9;

}



/* Sections */

section {

    padding: 80px 0;

    scroll-margin-top: 120px; /* Ajustado para account for header */

}



.section-header {

    text-align: center;

    margin-bottom: 4rem;

}



.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    color: var(--text-dark);

    position: relative;

    display: inline-block;

    padding-bottom: 0.5rem;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 3px;

    background: linear-gradient(to right, var(--gold), var(--gold-dark));

    border-radius: 1.5px;

}



.section-subtitle {

    font-size: 1.1rem;

    color: var(--text-muted);

    max-width: 800px;

    margin: 0 auto 2rem;

}



/* Services Section */

.services-section {

    background: var(--bg-light);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    position: sticky;

    top: 0;

    z-index: 100;

    background: var(--bg-light);

    padding: 2rem 0;

    margin-bottom: 3rem;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}



.service-card {

    background: var(--white);

    padding: 2.5rem;

    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

    text-align: center;

    transition: var(--transition-base);

    position: relative;

    overflow: hidden;

}



.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.3s ease;

}



.service-card:hover::before {

    transform: scaleX(1);

}



.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}



.service-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    color: var(--white);

    font-size: 2rem;

    position: relative;

    overflow: hidden;

}



.service-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);

    top: 0;

    left: -100%;

    transition: left 0.5s ease;

}



.service-card:hover .service-icon::after {

    left: 0;

}



.service-card h3 {

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.service-card p {

    margin-bottom: 1.5rem;

    color: var(--text-secondary);

}



.service-link {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition-base);

}



.service-link:hover {

    color: var(--primary-dark);

    gap: 12px;

}



/* About Section */

.about-section {

    background: var(--white);

}



.about-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.about-text h2 {

    margin-bottom: 2rem;

    text-align: center;

    white-space: nowrap; /* Força o texto a ficar em uma linha */

}



.about-features {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1.5rem;

    margin: 2rem 0;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.5rem;

    background: var(--white);

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    transition: var(--transition-base);

    border-left: 4px solid var(--gold);

}



.feature-item:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}



.feature-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--gold), var(--gold-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);

    position: relative;

    overflow: hidden;

}



.feature-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);

    top: 0;

    left: -100%;

    transition: left 0.5s ease;

}



.feature-item:hover .feature-icon::after {

    left: 0;

}



.feature-icon i {

    color: var(--white);

    font-size: 1.3rem;

}



.feature-item span {

    font-weight: 500;

    color: var(--text-primary);

    font-size: 1rem;

}



.about-image {

    position: relative;

}



.about-image img {

    width: 100%;

    border-radius: 12px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

    transition: transform 0.8s ease, filter 0.4s ease;

    filter: brightness(0.95);

}



.about-image:hover img {

    transform: scale(1.02);

    filter: brightness(1.05);

}



.about-image {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.1);

}



.about-image::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%);

    z-index: 1;

    transition: opacity 0.3s ease;

    opacity: 0;

}



.about-image:hover::before {

    opacity: 1;

}



/* Team Section */

.team-section {

    background: var(--bg-light);

}



.team-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

}



.team-item {

    background: var(--white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    transition: var(--transition-base);

}



.team-item:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}



.team-image {

    width: 100%;

    height: 250px;

    overflow: hidden;

}



.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease, filter 0.4s ease;

    filter: brightness(0.95);

}



.team-item:hover .team-image img {

    transform: scale(1.02);

    filter: brightness(1.05);

}



.team-content {

    padding: 2rem;

}



.team-content h3 {

    color: var(--primary-color);

    margin-bottom: 1rem;

    font-size: 1.4rem;

    font-weight: 600;

}



.team-content p {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.5rem;

}



.team-features {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}



.team-feature {

    display: flex;

    align-items: center;

    padding: 8px 15px;

    background: rgba(212, 175, 55, 0.1);

    color: var(--gold-dark);

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 500;

    border: 1px solid rgba(212, 175, 55, 0.2);

}



.team-feature i {

    margin-right: 5px;

    font-size: 0.8rem;

}



/* Differentials Section */

.differentials-section {

    background: var(--bg-light);

}



.differentials-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



.differential-card {

    background: var(--white);

    padding: 2rem;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

    transition: var(--transition-base);

}



.differential-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}



.differential-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--gold), var(--gold-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    color: var(--white);

    font-size: 1.8rem;

    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);

    position: relative;

    overflow: hidden;

}



.differential-icon::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);

    top: 0;

    left: -100%;

    transition: left 0.5s ease;

}



.differential-card:hover .differential-icon::after {

    left: 0;

}



.differential-card h3 {

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.differential-card p {

    color: var(--text-secondary);

}



/* CTA Section */

.cta-section {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    color: var(--white);

    text-align: center;

}



.cta-content h2 {

    color: var(--white);

    margin-bottom: 1rem;

    font-size: 2.5rem;

}



.cta-content p {

    font-size: 1.2rem;

    margin-bottom: 2.5rem;

    color: rgba(255,255,255,0.9);

}



.cta-actions {

    display: flex;

    gap: 1.5rem;

    justify-content: center;

    flex-wrap: wrap;

}



.cta-actions .btn-primary {

    background: var(--secondary-color);

    color: var(--text-primary);

}



.cta-actions .btn-primary:hover {

    background: var(--accent-color);

    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);

}



.cta-actions .btn-outline {

    border-color: var(--white);

    color: var(--white);

}



.cta-actions .btn-outline:hover {

    background: var(--white);

    color: var(--primary-color);

}



/* Footer */

.footer {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    color: var(--white);

    padding: 4rem 0 2rem;

    position: relative;

}



.footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(to right, var(--gold-dark), var(--gold), var(--gold-dark));

}



.footer-content {

    display: grid;

    grid-template-columns: 1.2fr 1fr 1fr 1.1fr; /* Primeira coluna maior para acomodar logo e texto */

    gap: 4rem; /* Gap maior para evitar sobreposição */

    margin-bottom: 3rem;

    align-items: start; /* Alinha itens no topo */

    text-align: center; /* Centraliza todos os textos */

}



.footer-logo {

    display: flex;

    align-items: center;

    justify-content: center; /* Centraliza o logo */

    gap: 12px;

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 1.5rem; /* Margem maior */

    filter: grayscale(80%);

    opacity: 0.7;

    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;

    flex-wrap: wrap; /* Permite quebra se necessário */

    max-width: 100%; /* Limita a largura */

}



.footer-logo:hover {

    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.05);

}



.footer-logo-img {

    height: 35px;

    width: auto;

}



.footer-logo .logo-text {

    white-space: normal; /* Permite quebra de linha */

    font-size: 1.3rem; /* Reduz ligeiramente o tamanho */

    max-width: 200px; /* Limita a largura máxima */

    text-align: center; /* Centraliza o texto */

    line-height: 1.2; /* Espaçamento entre linhas */

    word-break: break-word; /* Quebra palavras se necessário */

}



.footer-section h3 {

    color: var(--white);

    margin-bottom: 1.5rem;

    font-size: 1.5rem;

    font-weight: 600;

}



.footer-section p {

    color: rgba(255,255,255,0.8);

    font-size: 1.1rem;

}



.footer-section ul {

    list-style: none;

    text-align: center; /* Centraliza as listas */

    padding: 0; /* Remove padding padrão */

}



.footer-section ul li {

    margin-bottom: 0.8rem;

}



.footer-section ul li a {

    color: rgba(255,255,255,0.8);

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-section ul li a:hover {

    color: var(--secondary-color);

}



.social-links {

    display: flex;

    gap: 1rem;

    margin-top: 1.5rem;

    justify-content: center; /* Centraliza os ícones sociais */

}



.social-links a {

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    transition: var(--transition-base);

}



.social-links a:hover {

    background: var(--secondary-color);

    color: var(--text-primary);

    transform: translateY(-2px);

}



.contact-info {

    space-y: 1rem;

}



.contact-item {

    display: flex;

    align-items: flex-start;

    justify-content: center; /* Centraliza os itens de contato */

    gap: 12px;

    margin-bottom: 1rem;

    color: rgba(255,255,255,0.8);

}



.contact-item i {

    color: var(--secondary-color);

    margin-top: 4px;

}



.footer-bottom {

    text-align: center;

    padding: 1.5rem 0;

}



.footer-bottom p {

    color: rgba(255, 255, 255, 0.7);

    margin: 0.5rem 0;

    padding: 1rem 0;

}



.developer-credits {

    color: var(--white) !important;

    font-weight: 500;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



/* WhatsApp Float */

.whatsapp-float {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 1000;

}



.whatsapp-float a {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, #25d366, #128c7e);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 1.8rem;

    text-decoration: none;

    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);

    transition: var(--transition-base);

    animation: pulse 2s infinite;

}



.whatsapp-float a:hover {

    transform: scale(1.1);

    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);

}



@keyframes pulse {

    0% { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); }

    50% { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6), 0 0 0 15px rgba(37, 211, 102, 0.1); }

    100% { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); }

}



/* Responsive Design */

@media (max-width: 1200px) {

    .footer-content {

        grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr; /* Ajusta proporções para telas médias */

        gap: 3rem; /* Gap menor para telas médias */

    }

}



@media (max-width: 1024px) {

    .hero-title {

        font-size: 3rem;

    }

    

    .about-content {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    

    .services-grid {

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    }

    

    .stats-grid {

        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    }

    

    .footer-content {

        grid-template-columns: 1fr 1fr; /* Duas colunas para tablets */

        gap: 2.5rem;

    }

}



/* Força o menu desktop a ser visível fora da media query mobile */

@media (min-width: 769px) {

    .nav-menu {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        position: static !important;

        background: transparent !important;

        box-shadow: none !important;

        padding: 0 !important;

        z-index: auto !important;

        max-height: none !important;

        overflow: visible !important;

        width: auto !important;

    }

    

    /* Garante que o footer desktop tenha texto centralizado */

    .footer-content {

        text-align: center !important;

    }

    

    .footer-section {

        text-align: center;

    }

    

    .footer-section h3 {

        text-align: center;

    }

    

    .footer-section p {

        text-align: center;

    }

    

    .footer-section ul {

        text-align: center;

    }

}



.contact-card h3 {

    color: var(--text-primary);

    margin-bottom: 0.5rem;

    font-size: 1.3rem;

}



.contact-card p {

    color: var(--text-secondary);

    margin-bottom: 0.5rem;

    font-weight: 500;

}



.contact-hours {

    font-size: 0.9rem;

    color: var(--text-muted);

}



.whatsapp-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #25d366;

    color: var(--white);

    padding: 8px 16px;

    border-radius: 25px;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    margin-top: 1rem;

    transition: var(--transition-base);

}



.whatsapp-link:hover {

    background: #128c7e;

    transform: translateY(-2px);

}



/* Map Section */

.map-section {

    padding: 80px 0;

    background-color: var(--color-light);

}



.map-container {

    position: relative;

    width: 100%;

    border: 4px solid var(--primary-color);

    box-shadow: 0 0 0 4px var(--gold);

    border-radius: 8px;

    overflow: hidden;

    margin: 2rem 0;

}



.map-container iframe {

    width: 100%;

    height: 520px;

    border: none;

    display: block;

}



/* Modal Styles */

.modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.modal.show {

    display: block;

    opacity: 1;

}



.modal-content {

    position: relative;

    background-color: var(--white);

    margin: 2% auto;

    padding: 20px;

    width: 90%;

    max-width: 1200px;

    max-height: 90vh;

    overflow-y: auto;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transform: translateY(-20px);

    opacity: 0;

    transition: var(--transition-base);

}



.modal.show .modal-content {

    transform: translateY(0);

    opacity: 1;

}



.close-modal {

    position: absolute;

    right: 20px;

    top: 20px;

    font-size: 28px;

    font-weight: bold;

    color: var(--text-secondary);

    cursor: pointer;

    z-index: 1001;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--bg-light);

    border-radius: 50%;

    transition: var(--transition-base);

}



.close-modal:hover {

    color: var(--primary-color);

    background: var(--bg-dark);

    transform: rotate(90deg);

}



@media (max-width: 768px) {

    .nav-menu {

        display: none;

        position: fixed;

        top: 70px;  /* Altura do cabeçalho */

        left: 0;

        right: 0;

        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);

        border-top: 3px solid var(--gold);

        box-shadow: 0 10px 30px rgba(0,0,0,0.3);

        padding: 1.5rem 0;

        z-index: 9999; /* Z-index mais alto */

        max-height: calc(100vh - 70px);

        overflow-y: auto;

        width: 100%;

        -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */

        touch-action: pan-y; /* Permite rolagem vertical */

        pointer-events: none; /* Desabilita interação quando fechado */

        backdrop-filter: blur(10px);

        -webkit-backdrop-filter: blur(10px);

    }



    .nav-menu.active {

        display: block;

        visibility: visible;

        opacity: 1;

        pointer-events: auto; /* Habilita interação quando aberto */

        animation: slideDown 0.3s ease-out;

    }



    /* Overlay escuro atrás do menu mobile */

    .nav-menu.active::after {

        content: '';

        position: fixed;

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        background: rgba(0,0,0,0.4);

        z-index: -1;

        animation: fadeInOverlay 0.3s ease-out;

    }



    @keyframes fadeInOverlay {

        from { opacity: 0; }

        to { opacity: 1; }

    }



    @keyframes slideDown {

        from {

            opacity: 0;

            transform: translateY(-20px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    

    .nav-menu ul {

        flex-direction: column;

        gap: 0;

        width: 100%;

    }

    

    .nav-menu li {

        width: 100%;

        display: block;

    }

    

    .nav-menu a {

        padding: 1.2rem 2rem;

        width: 100%;

        display: block;

        text-align: center;

        border-bottom: 1px solid rgba(212, 175, 55, 0.2);

        font-size: 18px;

        font-weight: 500;

        line-height: 1.5;

        position: relative;

        z-index: 10001;

        pointer-events: auto;

        text-decoration: none;

        color: var(--white);

        background: transparent;

        transition: all 0.3s ease;

        text-shadow: 0 1px 2px rgba(0,0,0,0.3);

    }



    .nav-menu a:hover,

    .nav-menu a:active {

        background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);

        color: var(--text-primary);

        text-shadow: none;

        transform: translateX(10px);

        box-shadow: inset 0 0 20px rgba(0,0,0,0.2);

    }



    .nav-menu a:last-child {

        border-bottom: none;

    }



    .nav-menu a::before {

        content: '';

        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        width: 4px;

        background: var(--gold);

        transform: scaleY(0);

        transition: transform 0.3s ease;

        transform-origin: bottom;

    }



    .nav-menu a:hover::before {

        transform: scaleY(1);

        transform-origin: top;

    }

    

    .nav-toggle {

        display: flex;

        z-index: 10000; /* Z-index mais alto que o menu */

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        margin-top: 50px;

        pointer-events: auto; /* Sempre clicável */

        padding: 8px;

        border-radius: 6px;

        transition: all 0.3s ease;

        background: transparent;

    }



    .nav-toggle:hover {

        background: rgba(212, 175, 55, 0.1);

        box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);

    }



    .nav-toggle.active {

        background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);

        box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);

    }



    .nav-toggle.active span {

        background: var(--text-primary);

    }

    

    .nav-toggle.active span:nth-child(1) {

        transform: translateY(7px) rotate(45deg);

    }

    

    .nav-toggle.active span:nth-child(2) {

        opacity: 0;

    }

    

    .nav-toggle.active span:nth-child(3) {

        transform: translateY(-7px) rotate(-45deg);

    }

    

    .hero {

        min-height: auto;

        padding: 0;

    }

    

    .hero-content {

        padding: 100px 0 40px;

    }

    

    .hero-title {

        font-size: 2.2rem;

        line-height: 1.3;

        margin-bottom: 1.5rem;

        text-align: center;

        padding: 0 15px;

    }

    

    .hero-description {

        font-size: 1rem;

        margin-bottom: 2rem;

        padding: 0 15px;

        text-align: center;

        max-width: 100%;

    }

    

    .hero-actions {

        justify-content: center;

        gap: 1rem;

        flex-direction: column;

        align-items: center;

    }

    

    .hero-stats {

        padding: 1.5rem 0;

    }

    

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

    }

    

    .services-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .team-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .team-content {

        padding: 1.5rem;

    }

    

    .differentials-grid {

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    }

    

    .about-features {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .feature-item {

        padding: 1rem;

    }

    

    .cta-actions {

        flex-direction: column;

        align-items: center;

    }

    

    .footer-content {

        display: block !important; /* Força layout em bloco ao invés de grid */

        gap: 0; /* Remove gap do grid */

        text-align: center !important; /* Centraliza todo o conteúdo no mobile */

    }

    

    .footer-section {

        margin-bottom: 4rem !important; /* Margem ainda maior entre seções */

        padding: 2rem 0 3rem 0 !important; /* Padding forçado em cima e embaixo */

        border-bottom: 2px solid rgba(255,255,255,0.2); /* Linha divisória mais visível */

        width: 100%;

        clear: both; /* Garante que não haja sobreposição */

        display: block !important; /* Força display em bloco */

        float: none !important; /* Remove qualquer float */

        position: relative; /* Posicionamento relativo */

        z-index: 1; /* Z-index para empilhamento correto */

    }

    

    .footer-section:last-child {

        border-bottom: none; /* Remove borda da última seção */

    }

    

    .footer-logo {

        flex-direction: column; /* Coloca logo e texto em coluna no mobile */

        text-align: center;

        gap: 8px; /* Espaçamento entre logo e texto */

        margin-bottom: 3rem !important; /* Espaço extra abaixo do logo */

        padding-bottom: 2rem !important; /* Padding adicional forçado */

        width: 100%;

        position: relative; /* Garante posicionamento correto */

        display: block !important; /* Força display em bloco */

        clear: both; /* Limpa floats */

        border-bottom: 3px solid rgba(212, 175, 55, 0.3); /* Borda dourada para separar */

    }

    

    .footer-logo .logo-text {

        font-size: 1.4rem; /* Aumenta o tamanho do texto no mobile */

        white-space: normal; /* Permite quebra de linha */

        display: block; /* Garante que seja tratado como bloco */

        max-width: 200px; /* Aumenta largura no mobile */

        line-height: 1.3; /* Espaçamento adequado entre linhas */

        text-align: center; /* Centraliza o texto */

        font-weight: 700; /* Deixa mais destacado */

        margin: 0 auto; /* Centraliza o elemento */

    }

    

    .footer-section h3 {

        margin-top: 3rem !important; /* Espaço adicional forçado acima dos títulos */

        margin-bottom: 1.5rem !important; /* Espaço abaixo dos títulos */

        padding-top: 2rem !important; /* Padding adicional acima */

        clear: both; /* Limpa floats */

        position: relative; /* Posicionamento relativo */

        text-align: center !important; /* Centraliza os títulos no mobile */

    }

    

    /* Especial para o h3 da seção Serviços */

    .footer-section:nth-child(2) h3 {

        margin-top: 5rem !important; /* Margem MUITO maior para o título Serviços */

        padding-top: 3rem !important; /* Padding MUITO maior */

        border-top: 2px solid rgba(212, 175, 55, 0.2); /* Borda superior dourada */

        text-align: center !important; /* Centraliza o título Serviços no mobile */

    }

    

    .footer-section ul {

        margin-top: 0.5rem; /* Espaço entre título e lista */

    }

    

    .footer-section p {

        margin-bottom: 1.5rem; /* Espaço extra abaixo do parágrafo descritivo */

        padding-bottom: 1rem; /* Padding adicional */

    }

    

    /* Força separação específica entre seções */

    .footer-section:nth-child(1) {

        margin-bottom: 6rem !important; /* Primeira seção com MUITO mais espaço */

        padding-bottom: 4rem !important; /* Padding extra na primeira seção */

    }

    

    .footer-section:nth-child(2) {

        margin-top: 4rem !important; /* Espaço adicional acima da segunda seção */

        padding-top: 3rem !important; /* Padding adicional acima */

    }

    

    /* Força um espaçador visual entre logo e serviços */

    .footer-section:nth-child(1)::after {

        content: '';

        display: block;

        height: 3rem; /* Espaçador de 3rem */

        width: 100%;

        clear: both;

    }

    

    h1 { font-size: 2.5rem; }

    h2 { font-size: 2rem; }

    h3 { font-size: 1.5rem; }

    

    section {

        padding: 60px 0;

    }

    

    .container {

        padding: 0 15px;

    }



    .section-title::after {

        width: 60px;

    }

    

    .text-highlight::after {

        height: 20%;

    }

    

    .service-card:hover,

    .service-card-large:hover,

    .team-item:hover,

    .differential-card:hover,

    .feature-item:hover {

        transform: translateY(-4px);

    }

    

    .page-hero {

        padding-top: 120px; /* Ajustado para mobile */

    }

    

    .logo-text {

        font-size: 1.2rem; /* Reduz para mobile */

    }

    

    .about-text h2 {

        font-size: 1.8rem; /* Reduz o tamanho para mobile */

    }

}



/* Responsive Contact Page */

@media (max-width: 768px) {

    .contact-grid {

        grid-template-columns: 1fr;

    }

    

    .map-container iframe {
        height: 320px;
    }

    

    .modal-content {

        margin: 0;

        width: 100%;

        height: 100%;

        max-height: 100vh;

        border-radius: 0;

    }



    .service-detail-content {

        flex-direction: column;

    }



    .service-detail-text,

    .quote-form {

        width: 100%;

    }

    

    /* Corrige o menu mobile para garantir que seja exibido quando ativo */

    .nav-menu.active {

        display: block !important;

    }

    

    /* Corrige o formulário em dispositivos móveis */

    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    

    /* Garante que o z-index do nav-toggle seja maior que outros elementos */

    .nav-toggle {

        z-index: 1010;

    }

    

    /* Corrige problema do formulário aparecer depois do rodapé em mobile */

    .footer {

        position: relative;

        z-index: 1;

    }

    

    .quote-form, 

    .contact-form,

    .contact-section,

    .contact-form-container {

        position: relative;

        z-index: 5;

    }

}



@media (max-width: 480px) {

    .hero {

        min-height: 100vh;

        padding: 0;

        margin-top: -90px; /* Compensa o padding do body */

        padding-top: 130px; /* Espaço adequado para o header no mobile */

    }

    

    .hero-content {

        padding: 80px 0 30px;

    }

    

    .hero-title {

        font-size: 1.8rem;

        line-height: 1.2;

        margin-bottom: 1rem;

        padding: 0 15px;

        text-align: center;

    }

    

    .hero-description {

        font-size: 0.95rem;

        padding: 0 20px;

        margin-bottom: 1.5rem;

        text-align: center;

    }

    

    .hero-actions {

        flex-direction: column;

        gap: 0.8rem;

        padding: 0 20px;

    }

    

    .hero-stats {

        padding: 1rem 0;

    }

    

    .stats-grid {

        grid-template-columns: 1fr;

        gap: 0.8rem;

        padding: 0 15px;

    }

    

    .stat-item {

        padding: 1rem;

        background: rgba(255,255,255,0.05);

        border-radius: 8px;

    }

    

    .stat-number {

        font-size: 2rem;

    }

    

    .stat-label {

        font-size: 0.9rem;

    }

    

    .btn {

        padding: 12px 20px;

        font-size: 0.9rem;

        width: 100%;

        max-width: 280px;

    }

    

    .btn-large {

        padding: 14px 24px;

        font-size: 0.95rem;

    }

    

    .section-title {

        font-size: 1.8rem;

        padding: 0 15px;

    }

    

    .section-subtitle {

        font-size: 1rem;

        padding: 0 15px;

    }



    .service-card {

        padding: 2rem 1.5rem;

    }

    

    .whatsapp-float {

        bottom: 15px;

        right: 15px;

    }

    

    .whatsapp-float a {

        width: 55px;

        height: 55px;

        font-size: 1.6rem;

    }

    

    .feature-item {

        flex-direction: column;

        text-align: center;

        padding: 1rem;

    }

    

    .feature-icon {

        margin-bottom: 0.5rem;

    }

    

    .container {

        padding: 0 15px;

        max-width: 100%;

    }

    

    section {

        padding: 50px 0;

    }

    

    .page-hero {

        padding-top: 110px; /* Ajustado para mobile pequeno */

    }

    

    .logo-text {

        font-size: 1rem; /* Reduz ainda mais para mobile pequeno */

    }

    

    .about-text h2 {

        font-size: 1.4rem; /* Reduz ainda mais para mobile pequeno */

    }

    

    .footer-logo .logo-text {

        font-size: 1.2rem; /* Mantém tamanho bom para telas pequenas */

        white-space: normal; /* Permite quebra de linha */

        max-width: 180px; /* Aumenta largura para telas pequenas */

        line-height: 1.3; /* Espaçamento adequado entre linhas */

        text-align: center; /* Centraliza o texto */

        font-weight: 700; /* Deixa mais destacado */

        margin: 0 auto; /* Centraliza o elemento */

    }

    

    .footer-content {

        display: block !important; /* Mantém layout em bloco */

        text-align: center !important; /* Centraliza todo o conteúdo no mobile pequeno */

    }

    

    .footer-section {

        margin-bottom: 3.5rem !important; /* Margem aumentada para mobile pequeno */

        padding: 1.5rem 0 2.5rem 0 !important; /* Padding forçado */

        display: block !important; /* Força display em bloco */

        clear: both; /* Limpa floats */

    }

    

    .footer-section:nth-child(1) {

        margin-bottom: 4.5rem !important; /* Primeira seção com mais espaço ainda */

        padding-bottom: 3rem !important; /* Padding extra */

    }

    

    .footer-section:nth-child(2) {

        margin-top: 3rem !important; /* Espaço extra acima da segunda seção */

        padding-top: 2rem !important; /* Padding extra acima */

    }

    

    .footer-section:nth-child(2) h3 {

        margin-top: 4rem !important; /* Margem extra para o título Serviços */

        padding-top: 2.5rem !important; /* Padding extra */

        text-align: center !important; /* Centraliza o título no mobile pequeno */

    }

    

    .footer-section h3 {

        text-align: center !important; /* Centraliza todos os títulos no mobile pequeno */

    }

}



/* Extra small devices */

@media (max-width: 360px) {

    .hero-title {

        font-size: 1.6rem;

        padding: 0 15px;

        text-align: center;

        line-height: 1.3;

    }

    

    .hero-description {

        font-size: 0.9rem;

        padding: 0 15px;

        text-align: center;

    }

    

    .hero-actions {

        padding: 0 15px;

    }

    

    .btn {

        font-size: 0.85rem;

        padding: 10px 15px;

    }

    

    .stat-number {

        font-size: 1.8rem;

    }

    

    .stat-label {

        font-size: 0.8rem;

    }

    

    .service-card {

        padding: 1.5rem 1rem;

    }

    

    .service-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    

    .container {

        padding: 0 10px;

    }

}



/* Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.fade-in {

    animation: fadeInUp 0.8s ease-out;

}



/* Loading and Smooth Transitions */

* {

    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

}



/* Page Hero */

.page-hero {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    color: var(--white);

    padding: 100px 0 80px; /* Reduzido devido ao padding do body */

    text-align: center;

    margin-top: -90px; /* Compensa o padding do body */

    padding-top: 140px; /* Espaço adequado para o header */

}



.page-hero-content h1 {

    color: var(--white);

    font-size: 3rem;

    margin-bottom: 1rem;

}



/* Page Hero Content */

.page-hero-content p {

    font-size: 1.2rem;

    color: rgba(255,255,255,0.9);

    max-width: 600px;

    margin: 0 auto;

}



/* Empresa Page Styles */

.empresa-intro {

    padding: 80px 0;

    background: var(--white);

}



.intro-content {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 4rem;

    align-items: stretch;

}



/* Mobile: Reorganiza layout para stats abaixo do texto */

@media (max-width: 768px) {

    .intro-content {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    

    .intro-stats {

        order: 2; /* Coloca os stats por último */

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

        margin-top: 2rem;

    }

    

    .intro-text {

        order: 1; /* Coloca o texto primeiro */

    }

}



@media (max-width: 480px) {

    .intro-stats {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .stat-card {

        padding: 1.2rem;

    }

    

    .stat-icon {

        width: 45px;

        height: 45px;

        font-size: 1.1rem;

    }

    

    .stat-content h3 {

        font-size: 1.3rem;

    }

    

    .stat-content p {

        font-size: 0.85rem;

    }

}



.intro-text h2 {

    margin-bottom: 2rem;

    text-align: center;

}



.intro-stats {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.stat-card {

    background: var(--bg-light);

    padding: 1.5rem;

    border-radius: 12px;

    display: flex;

    align-items: stretch;

    gap: 1rem;

    border-left: 4px solid var(--primary-color);

}



.stat-icon {

    width: 50px;

    height: 50px;

    background: var(--primary-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 1.2rem;

}



.stat-content h3 {

    color: var(--primary-color);

    font-size: 1.5rem;

    margin-bottom: 0.25rem;

}



.stat-content p {

    color: var(--text-secondary);

    margin: 0;

    font-size: 0.9rem;

}



/* MVV Section */

.mvv-section {

    background: var(--bg-light);

    padding: 80px 0;

}



.mvv-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.mvv-card {

    background: var(--white);

    padding: 2.5rem;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

    transition: var(--transition-base);

}



.mvv-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.15);

}



.mvv-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    color: var(--white);

    font-size: 1.8rem;

}



.mvv-card h3 {

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.mvv-card p {

    color: var(--text-secondary);

    line-height: 1.6;

}



/* Certifications */

.certifications-section {

    background: var(--white);

    padding: 80px 0;

}



.certifications-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



.cert-card {

    background: var(--bg-light);

    padding: 2rem;

    border-radius: 12px;

    text-align: center;

    border: 2px solid transparent;

    transition: var(--transition-base);

}



.cert-card:hover {

    border-color: var(--secondary-color);

    transform: translateY(-3px);

}



.cert-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 1.5rem;

    margin: 0 auto 1rem auto;

}



.cert-card h4 {

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.cert-card p {

    color: var(--text-secondary);

    margin-bottom: 0.5rem;

}



.cert-card p strong {

    color: var(--primary-color);

}



/* Timeline */

.timeline-section {

    background: var(--bg-light);

    padding: 80px 0;

}



.timeline {

    position: relative;

    max-width: 800px;

    margin: 0 auto;

}



.timeline::before {

    content: '';

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    background: var(--primary-color);

}



.timeline-item {

    position: relative;

    margin-bottom: 3rem;

    width: 50%;

}



.timeline-item:nth-child(odd) {

    left: 0;

    padding-right: 3rem;

}



.timeline-item:nth-child(even) {

    left: 50%;

    padding-left: 3rem;

}



.timeline-year {

    position: absolute;

    top: -10px;

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    border: 4px solid var(--white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    color: var(--white);

    line-height: 1;

    font-size: 0.9rem;
    line-height: 1;

    z-index: 2;

}



.timeline-item:nth-child(odd) .timeline-year {

    right: -40px;

}



.timeline-item:nth-child(even) .timeline-year {

    left: -40px;

}



.timeline-content {

    background: var(--white);

    padding: 2rem;

    border-radius: 12px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.08);

}



.timeline-content h4 {

    color: var(--primary-color);

    margin-bottom: 1rem;

    text-align: center;

}



.timeline-content p {

    color: var(--text-secondary);

    margin: 0;

    text-align: justify;

}



/* Service Cards Large - Services Page */

.service-card-large {

    padding: 2.5rem;

    border-radius: 12px;

    border: 2px solid var(--border-color);

    transition: var(--transition-base);

    text-align: center;

    background: var(--white);

}



.service-card-large:hover {

    border-color: var(--primary-color);

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}



.service-icon-large {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    border-radius: 50%;

    display: flex;

    align-items: stretch;

    justify-content: center;

    margin: 0 auto 1.5rem;

    color: var(--white);

    font-size: 1.8rem;

}



.service-card-large h3 {

    margin-bottom: 1rem;

    color: var(--text-primary);

    text-align: center;

}



.service-card-large p {

    color: var(--text-secondary);

    margin-bottom: 2rem;

    text-align: justify;

}



.service-card-actions {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    position: relative;
    align-items: center;

}

/* Correção de alinhamento de ícones em círculos */
.service-icon,
.service-icon-large,
.feature-icon,
.differential-icon,
.service-detail-icon,
.stat-icon,
.mvv-icon,
.cert-icon {
    align-items: center !important;
    justify-content: center !important;
}

.service-icon i,
.service-icon-large i,
.feature-icon i,
.differential-icon i,
.service-detail-icon i,
.stat-icon i,
.mvv-icon i,
.cert-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.service-icon i::before,
.service-icon-large i::before,
.feature-icon i::before,
.differential-icon i::before,
.service-detail-icon i::before,
.stat-icon i::before,
.mvv-icon i::before,
.cert-icon i::before {
    line-height: 1;
}

/* Títulos com linha centralizada */
.feature-list h4,
.feature-benefits h4 {
    text-align: center;
    width: 100%;
    min-height: 3.2rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-list h4::after,
.feature-benefits h4::after {
    content: none;
}

.service-features {
    position: relative;
    --feature-title-height: 3.2rem;
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0 calc(var(--feature-title-height) + 0.25rem);
}



.service-card-actions a.btn-outline {

    margin-bottom: 1rem;

}



.service-card-actions::after {

    content: '';

    position: absolute;

    width: 80%;

    height: 1px;

    background: rgba(0, 0, 0, 0.1);

    left: 10%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 0;

}



.service-card-actions .btn {

    position: relative;

    z-index: 1;

    margin: 0 auto;

    width: 100%;

    max-width: 220px;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 8px;

    font-weight: 600;

    padding: 12px 24px;

    border-radius: 8px;

    transition: var(--transition-base);

}



.service-card-actions .btn-primary {

    margin-top: 0.5rem;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;

    color: var(--white) !important;

    border: 2px solid var(--primary-color) !important;

}



.service-card-actions .btn-primary:hover {

    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)) !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

}



.service-card-actions .btn-outline {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--primary-color) !important;

    margin-bottom: 0.5rem;

}



.service-card-actions .btn-outline:hover {

    background: var(--primary-color) !important;

    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}



/* Service Detail Sections */

.service-detail {

    padding: 80px 0;

    scroll-margin-top: 100px;

    position: relative;

}



.service-detail.alt {

    background-color: var(--bg-light);

}



.service-detail-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: stretch;

}



.service-detail-text {

    padding: 2rem;

    background: var(--white);

    border-radius: 12px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}



.alt .service-detail-text {

    background: var(--bg-light);

}



.service-detail-icon {

    width: 80px;

    height: 80px;

    background: var(--primary-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

}



.service-detail-icon i {

    font-size: 2rem;

    color: white;

}



.service-detail h2 {

    font-size: 2.2rem;

    color: var(--text-primary);

    margin-bottom: 1rem;

}



.service-detail .lead {

    font-size: 1.1rem;

    line-height: 1.6;

    color: var(--text-secondary);

    margin-bottom: 2rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--border-color);

}



.service-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

    margin-top: 2rem;

}



.feature-list h4,

.feature-benefits h4 {

    font-size: 1.2rem;

    color: var(--primary-color);

    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: none;

}



.feature-list ul,

.feature-benefits ul {

    list-style: none;

    padding: 0;

}



.feature-list li,

.feature-benefits li {

    margin-bottom: 1rem;

    padding-left: 1.8rem;

    position: relative;

    font-size: 1rem;

    color: var(--text-secondary);

    transition: transform 0.3s ease;

}



.feature-list li:hover,

.feature-benefits li:hover {

    transform: translateX(5px);

}



.feature-list li i,

.feature-benefits li i {

    position: absolute;

    left: 0;

    top: 4px;

    color: var(--primary-color);

}



.service-detail-image {

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    height: 100%;

}



.service-detail-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.service-detail-image:hover img {

    transform: scale(1.05);

}



@media (max-width: 992px) {

    .service-detail-content {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .service-features {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .service-detail-text {

        padding: 1.5rem;

    }

    

    .service-detail h2 {

        font-size: 1.8rem;

    }

}



@media (max-width: 768px) {

    .service-card-large {

        padding: 1.5rem;

    }

    

    .service-icon-large {

        width: 60px;

        height: 60px;

    }

    

    .service-icon-large i {

        font-size: 1.5rem;

    }

    

    .service-card-large h3 {

        font-size: 1.2rem;

    }

}



/* Why Choose Section */

.why-choose-section {

    background: var(--white);

    padding: 80px 0;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.feature-card {

    padding: 2rem;

    border-radius: 12px;

    border: 2px solid var(--border-color);

    transition: var(--transition-base);

    text-align: center;

}



.feature-card:hover {

    border-color: var(--primary-color);

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

}



.feature-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    color: var(--white);

    font-size: 1.8rem;

}



.feature-card h4 {

    margin-bottom: 1rem;

    color: var(--text-primary);

}



.feature-card p {

    color: var(--text-secondary);

    margin: 0;

}



/* Contact Page Styles */

.contact-section {

    padding: 80px 0;

    background: var(--white);

}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: start;

}



.contact-form-container .section-header {

    text-align: left;

    margin-bottom: 2rem;

}



/* Contact Form */

.contact-form {

    background: var(--bg-light);

    padding: 2.5rem;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    margin-bottom: 1.5rem;

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    color: var(--text-primary);

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 12px 16px;

    border: 2px solid var(--border-color);

    border-radius: 8px;

    font-size: 1rem;

    transition: var(--transition-base);

    background: var(--white);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



.checkbox-group {

    margin: 2rem 0;

}



.checkbox-label {

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    color: var(--text-secondary);

}



.checkbox-label input[type="checkbox"] {

    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;

}



.checkmark {

    width: 20px;

    height: 20px;

    border: 2px solid var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition-base);

}



.checkbox-label input[type="checkbox"]:checked + .checkmark {

    background: var(--gold);

    border-color: var(--gold);

}



.checkbox-label input[type="checkbox"]:checked + .checkmark::after {

    content: '✓';

    color: var(--white);

    font-weight: bold;

}



.form-disclaimer {

    font-size: 0.9rem;

    color: var(--text-muted);

    text-align: center;

    margin-top: 1rem;

    line-height: 1.4;

}



/* Contact Info Cards */

.contact-info-container {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.contact-card {

    background: var(--white);

    padding: 2rem;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    text-align: center;

    transition: var(--transition-base);

    border-left: 4px solid var(--gold);

}



.contact-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0,0,0,0.12);

}



.contact-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--gold), var(--gold-dark));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    color: var(--white);

    font-size: 1.5rem;

}



/* Prevenir scroll do body quando modal estiver aberto */

body.modal-open {

    overflow: hidden;

}



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

   SEÇÃO DE CLIENTES (CARROSSEL)

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

.clients-section {

    padding: 80px 0;

    background-color: var(--bg-light);

    overflow: hidden;

}



.clients-carousel {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 40px 0;

}



.clients-carousel::before,

.clients-carousel::after {

    content: "";

    position: absolute;

    top: 0;

    height: 100%;

    width: 20%;

    z-index: 2;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.clients-carousel::before {

    left: 0;

    background: linear-gradient(to right, 

        rgba(var(--primary-color-rgb), 0.1) 0%, 

        transparent 100%);

}



.clients-carousel::after {

    right: 0;

    background: linear-gradient(to left, 

        rgba(var(--primary-color-rgb), 0.1) 0%, 

        transparent 100%);

}



.clients-carousel:hover::before,

.clients-carousel:hover::after {

    opacity: 1;

}



.clients-track {

    display: flex;

    animation: scroll 60s linear infinite;

    width: calc(250px * 24);

}



.client-logo {

    flex: 0 0 250px;

    height: 120px;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

    position: relative;

}



.client-logo::before {

    content: '';

    position: absolute;

    top: 10px;

    left: 10px;

    right: 10px;

    bottom: 10px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 8px;

    transition: var(--transition-base);

}



.client-logo img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    opacity: 1;

    transition: var(--transition-base);

    padding: 10px;

    filter: brightness(1.1) contrast(1.1);

    image-rendering: -webkit-optimize-contrast;

    image-rendering: crisp-edges;

}



.client-logo:hover {

    transform: scale(1.1);

}



.client-logo:hover::before {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),

                0 0 0 2px var(--primary-color);

}



.client-logo:hover img {

    opacity: 1;

    transform: scale(1.1);

    filter: brightness(1.2) contrast(1.2);

}



@keyframes scroll {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(calc(-250px * 12));

    }

}



/* Responsive adjustments para carrossel */

@media (max-width: 768px) {

    .client-logo {

        flex: 0 0 200px;

        height: 100px;

        padding: 15px;

    }



    .clients-track {

        width: calc(200px * 24);

    }



    @keyframes scroll {

        0% {

            transform: translateX(0);

        }

        100% {

            transform: translateX(calc(-200px * 12));

        }

    }



    .clients-carousel::before,

    .clients-carousel::after {

        width: 20%;

    }

}



@media (max-width: 480px) {

    .client-logo {

        flex: 0 0 160px;

        height: 80px;

        padding: 10px;

    }



    .clients-track {

        width: calc(160px * 24);

    }



    @keyframes scroll {

        0% {

            transform: translateX(0);

        }

        100% {

            transform: translateX(calc(-160px * 12));

        }

    }



    .clients-carousel::before,

    .clients-carousel::after {

        width: 20%;

    }

}



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

   GRID DE OUTROS SERVIÇOS

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

.additional-services-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    margin-top: 40px;

}



.service-card {

    background-color: var(--bg-white);

    border-radius: 10px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    overflow: hidden;

}



.service-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}



.service-card-content {

    padding: 30px;

}



.service-card-icon {

    width: 100%;

    font-size: 2.5rem;

    color: var(--primary-color);

    margin-bottom: 20px;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

}



.service-card h3 {

    color: var(--text-dark);

    font-size: 1.5rem;

    margin-bottom: 15px;

}



.service-card p {

    color: var(--text-muted);

    margin-bottom: 15px;

}



.service-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.service-card ul li {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

    color: var(--text-dark);

}



.service-card ul li i {

    color: var(--primary-color);

    margin-right: 10px;

}



@media (max-width: 768px) {

    .additional-services-grid {

        grid-template-columns: 1fr;

    }

}



.service-detail-icon {

    width: 80px;

    height: 80px;

    background: var(--primary-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

}



.service-detail-text h2 {

    text-align: center;

    margin-bottom: 20px;

}



.service-card-content {

    padding: 30px;

    text-align: center;

}



.service-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

    text-align: left;

}



.service-card ul li {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

    color: var(--text-dark);

}



.service-card ul li i {

    color: var(--primary-color);

    margin-right: 10px;

    min-width: 20px;

    text-align: center;

}



.service-features {

    text-align: left;

}



.feature-list ul li,

.feature-benefits ul li {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

}



.feature-list ul li i,

.feature-benefits ul li i {

    color: var(--primary-color);

    margin-right: 10px;

    min-width: 20px;

    text-align: center;

}



.service-detail-text p {

    text-align: center;

    margin-bottom: 30px;

}



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

   ESTILO DOS TÍTULOS

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

.section-title,

.page-title,

.section-header h2,

.content-header h2,

.service-detail h2,

.about-section h2,

.team-section h2,

.contact-section h2,

.form-section h2,

.success-message h2,

.cta-section h2,

.history-section h2,

.values-section h2,

.mission-section h2,

.workforce-section h2,

.benefits-section h2,

.process-section h2,

.additional-services h2 {

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    color: var(--text-dark);

}



.section-subtitle,

.page-subtitle,

.section-header p,

.content-header p,

.about-section p,

.team-section p,

.contact-section p,

.form-section p,

.success-message p,

.cta-section p,

.history-section p,

.values-section p,

.mission-section p,

.workforce-section p,

.benefits-section p,

.process-section p,

.additional-services p {

    font-size: 1.1rem;

    color: var(--text-muted);

    max-width: 800px;

    margin: 0 auto 2rem;

}



/* Títulos menores */

.service-card h3,

.team-card h3,

.benefit-card h3,

.process-card h3,

.feature-card h3,

.footer-section h3 {

    font-size: 1.5rem;

    font-weight: 600;

    margin-bottom: 1rem;

    color: var(--text-dark);

}



/* Subtítulos de features */

.feature-list h4,

.feature-benefits h4 {

    font-size: 1.2rem;

    font-weight: 600;

    margin-bottom: 1rem;

    color: var(--text-dark);

}



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

   BOTÕES DE AÇÃO 

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

.centered-cta {

    text-align: center;

    padding: 2rem 0;

    margin: -2rem 0 2rem;

    background: transparent;

}



.centered-cta .btn {

    font-size: 1.25rem;

    padding: 1rem 2.5rem;

    border-radius: 50px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    transition: var(--transition-base);

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;

    color: var(--white) !important;

    border: 2px solid var(--primary-color) !important;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 0 auto;

}



.centered-cta .btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)) !important;

}



.centered-cta .btn i {

    font-size: 1.1em;

}



@media (max-width: 768px) {

    .centered-cta {

        padding: 1.5rem 0;

        margin: -1rem 0 1.5rem;

    }



    .centered-cta .btn {

        font-size: 1.1rem;

        padding: 0.875rem 2rem;

    }

}



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

   SEÇÃO DE FAQ

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

.faq-section {

    background-color: var(--bg-light);

    padding: 80px 0;

}



.faq-section .service-card-large {

    transition: var(--transition-base);

    cursor: default;

}



.faq-section .service-card-large:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.faq-section .service-icon-large {

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    color: var(--white);

    width: 70px;

    height: 70px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    font-size: 1.8rem;

    transition: var(--transition-base);

}



.faq-section .service-card-large:hover .service-icon-large {

    transform: scale(1.1) rotate(5deg);

}



.faq-section h3 {

    color: var(--text-primary);

    font-size: 1.3rem;

    margin-bottom: 1rem;

    font-weight: 600;

}



.faq-section p {

    color: var(--text-secondary);

    line-height: 1.6;

    margin: 0;

}



@media (max-width: 768px) {

    .faq-section {

        padding: 60px 0;

    }



    .faq-section .service-card-large {

        padding: 1.5rem;

    }



    .faq-section .service-icon-large {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }



    .faq-section h3 {

        font-size: 1.2rem;

    }

}



/* Ajustes para rolagem suave */

html {

    scroll-behavior: smooth;

}



.service-detail {

    padding: 80px 0;

    scroll-margin-top: 100px;

    position: relative;

}



.service-detail.alt {

    background-color: var(--bg-light);

}



.services-overview {

    padding: 80px 0;

    background-color: var(--bg-white);

}



.service-card-large {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.service-card-large:hover {

    transform: translateY(-5px);

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);

}



.btn-outline {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--primary-color) !important;

    transition: var(--transition-base);

}



.btn-outline:hover {

    background: var(--primary-color) !important;

    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}



/* Indicador visual da seção ativa */

.service-detail::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 0;

    background-color: var(--primary-color);

    transition: height 0.3s ease;

}



.service-detail.active::before {

    height: 100%;

}



/* Estilo dos botões Ver Detalhes */

.service-card-large .btn-outline {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--primary-color) !important;

    padding: 12px 24px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: var(--transition-base);

}



.service-card-large .btn-outline:hover {

    background: var(--primary-color) !important;

    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



/* Team Showcase Section */

.team-showcase {

    background: var(--bg-light);

    padding: 4rem 0;

}



.team-showcase-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.5rem;

    margin-top: 2rem;

}



.showcase-item {

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    transition: all 0.3s ease;

    height: 100%;

}



.showcase-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}



.showcase-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

}



.showcase-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.showcase-item:hover .showcase-image img {

    transform: scale(1.05);

}



.showcase-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 1rem;

    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));

    color: #fff;

    opacity: 0.9;

    transition: opacity 0.3s ease;

}



.showcase-item:hover .showcase-overlay {

    opacity: 1;

}



.showcase-content h3 {

    font-size: 1.2rem;

    margin-bottom: 0.3rem;

    color: #fff;

}



.showcase-content p {

    font-size: 0.9rem;

    margin: 0;

    color: rgba(255,255,255,0.9);

}



@media (max-width: 768px) {

    .team-showcase-grid {

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    }

    

    .showcase-image {

        height: 180px;

    }

}



@media (max-width: 480px) {

    .team-showcase-grid {

        grid-template-columns: 1fr;

    }

    

    .showcase-image {

        height: 200px;

    }

}



/* Map Navigation Buttons */

.map-navigation-buttons {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    margin-top: 2rem;

    flex-wrap: wrap;

}



.map-btn {

    display: flex;

    align-items: center;

    padding: 0.8rem 1.5rem;

    border-radius: 30px;

    font-weight: 600;

    transition: all 0.3s ease;

    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    font-size: 1rem;

}



.map-btn i {

    margin-right: 8px;

    font-size: 1.1rem;

}



.google-maps {

    background-color: #4285F4;

    color: white;

    border: 2px solid #4285F4;

}



.google-maps:hover {

    background-color: #3367D6;

    box-shadow: 0 6px 15px rgba(66, 133, 244, 0.4);

    transform: translateY(-3px);

}



.waze {

    background-color: #33CCFF;

    color: white;

    border: 2px solid #33CCFF;

}



.waze:hover {

    background-color: #25A4F5;

    box-shadow: 0 6px 15px rgba(51, 204, 255, 0.4);

    transform: translateY(-3px);

}



@media (max-width: 768px) {

    .map-navigation-buttons {

        flex-direction: column;

        align-items: center;

        gap: 1rem;

    }

    

    .map-btn {

        width: 80%;

        justify-content: center;

        padding: 0.8rem 1rem;

    }

}



@media (max-width: 480px) {

    .map-btn {

        width: 100%;

    }

}



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

   FORMULÁRIO DE ORÇAMENTO

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

.quote-form {

    background: var(--white);

    padding: 2.5rem;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    margin: 2rem 0;

}



.quote-form .form-group {

    margin-bottom: 1.5rem;

}



.quote-form label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 600;

    color: var(--text-primary);

}



.quote-form input,

.quote-form select,

.quote-form textarea {

    width: 100%;

    padding: 12px 16px;

    border: 2px solid var(--border-color);

    border-radius: 8px;

    font-size: 1rem;

    transition: var(--transition-base);

    background: var(--white);

}



.quote-form input:focus,

.quote-form select:focus,

.quote-form textarea:focus {

    outline: none;

    border-color: var(--primary-color);

    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);

}



.quote-form textarea {

    resize: vertical;

    min-height: 120px;

}



.quote-form .btn-primary {

    width: 100%;

    padding: 16px 32px;

    font-size: 1.1rem;

    font-weight: 600;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;

    color: var(--white) !important;

    border: 2px solid var(--primary-color) !important;

    border-radius: 8px;

    margin-top: 1rem;

}



.quote-form .btn-primary:hover {

    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)) !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

}



/* Modal de Orçamento */

.modal .quote-form {

    margin: 0;

    padding: 2rem;

}



.modal .quote-form h3 {

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    text-align: center;

}



/* Responsividade do formulário */

@media (max-width: 768px) {

    .quote-form {

        padding: 1.5rem;

    }

    

    .quote-form .btn-primary {

        padding: 14px 28px;

        font-size: 1rem;

    }

}



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

   CORREÇÕES ESPECÍFICAS PARA BOTÕES

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

button.btn,

a.btn,

input[type="submit"].btn {

    cursor: pointer;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-family: inherit;

    font-weight: 600;

    transition: var(--transition-base);

    border: none;

    outline: none;

}



button.btn-primary,

a.btn-primary,

input[type="submit"].btn-primary {

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;

    color: var(--white) !important;

    border: 2px solid var(--primary-color) !important;

}



button.btn-primary:hover,

a.btn-primary:hover,

input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)) !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

}



button.btn-outline,

a.btn-outline,

input[type="submit"].btn-outline {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--primary-color) !important;

}



button.btn-outline:hover,

a.btn-outline:hover,

input[type="submit"].btn-outline:hover {

    background: var(--primary-color) !important;

    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}



/* Força os estilos dos botões em todos os contextos */

.btn.btn-primary,

button.btn-primary,

a.btn-primary {

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;

    color: var(--white) !important;

    border: 2px solid var(--primary-color) !important;

}



.btn.btn-outline,

button.btn-outline,

a.btn-outline {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--primary-color) !important;

}



/* Botões específicos para hero - sobrescreve os padrões */

.hero-actions .btn.btn-outline,

.hero-actions button.btn-outline,

.hero-actions a.btn-outline {

    background: rgba(255, 255, 255, 0.1) !important;

    color: var(--white) !important;

    border: 2px solid rgba(255, 255, 255, 0.3) !important;

    backdrop-filter: blur(10px);

}



.hero-actions .btn.btn-outline:hover,

.hero-actions button.btn-outline:hover,

.hero-actions a.btn-outline:hover {

    background: var(--white) !important;

    color: var(--primary-color) !important;

    border: 2px solid var(--white) !important;

}