:root {
    --roxo: #490150;
    --laranja: #FF7901;
    --fundo-claro: #fff;
    --fundo-escuro: #e5d3e6;
    --texto-claro: #490150;
    --texto-escuro: #fff;
}

body {
    background-color: var(--fundo-claro);
    color: var(--texto-claro);
    font-family: 'Open Sans', 'Roboto', 'Roboto Condensed', 'Montserrat', Arial, sans-serif;
    transition: background 0.3s, color 0.3s;
}

.navbar {
    background-color: var(--laranja);
    transition: background 0.3s;
}

.navbar-brand,
.nav-link {
    color: var(--roxo) !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--fundo-escuro) !important;
    text-shadow: 0 2px 8px #49015033;
}

.theme-dark {
    background-color: var(--fundo-escuro);
    color: var(--texto-claro);
}

.theme-dark .navbar {
    background-color: var(--roxo);
}

.theme-dark .navbar-brand,
.theme-dark .nav-link {
    color: var(--laranja) !important;
}

.theme-dark .nav-link:hover,
.theme-dark .nav-link.active {
    color: #fff !important;
    text-shadow: 0 2px 8px #FF790133;
}

.hero {
    background: var(--laranja);
    color: var(--roxo);
    padding: 60px 0;
    text-align: center;
    transition: background 0.3s, color 0.3s;
}

.theme-dark .hero {
    background: var(--roxo);
    color: var(--laranja);
}

.btn-primary {
    background-color: var(--roxo);
    border: none;
    color: var(--laranja);
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--laranja);
    color: var(--roxo);
    transform: scale(1.05);
    box-shadow: 0 4px 16px #49015033;
}

.theme-dark .btn-primary {
    background-color: var(--laranja);
    color: var(--roxo);
}

.theme-dark .btn-primary:hover,
.theme-dark .btn-primary:focus {
    background-color: var(--roxo);
    color: var(--laranja);
}

.section-title {
    color: var(--roxo);
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 24px;
    transition: color 0.3s;
}

.theme-dark .section-title {
    color: var(--laranja);
}

.highlight-orange {
    color: var(--laranja);
    font-weight: 700;
}

.highlight-purple {
    color: var(--roxo);
    font-weight: 700;
}

.theme-dark .highlight-orange {
    color: var(--laranja);
}

.theme-dark .highlight-purple {
    color: var(--laranja);
}

.footer {
    background: var(--laranja);
    color: var(--roxo);
    padding: 20px 0;
    text-align: center;
    margin-top: 40px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    transition: background 0.3s, color 0.3s;
}

.theme-dark .footer {
    background: var(--roxo);
    color: var(--laranja);
}

.logo-smat {
    max-width: 180px;
    margin-bottom: 20px;
    transition: filter 0.3s;
}

.info-list li {
    margin-bottom: 8px;
}

.contact-info strong {
    color: var(--roxo);
}

.theme-dark .contact-info strong {
    color: var(--laranja);
}

.social-link {
    color: var(--roxo);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.social-link:hover {
    text-decoration: underline;
    color: var(--laranja);
}

.theme-dark .social-link {
    color: var(--laranja);
}

.theme-dark .social-link:hover {
    color: #fff;
}

/* Áreas de Atuação */
.area-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px #49015011;
    transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
    background: #fff;
    color: var(--roxo);
}

.area-card:hover {
    /* Removido o zoom */
    /* transform: scale(1.05); */
    box-shadow: 0 8px 32px #49015033;
    border: 2px solid var(--laranja);
}

.theme-dark .area-card {
    background: #2a002e;
    color: var(--laranja);
    border: none;
}

.theme-dark .area-card:hover {
    border: 2px solid var(--laranja);
    background: #490150;
    color: var(--laranja);
}

.area-icon {
    font-size: 2.5rem;
    color: var(--laranja);
    margin-bottom: 10px;
    transition: color 0.3s;
}

.theme-dark .area-icon {
    color: var(--laranja);
}

/* Cases */
.case-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px #49015011;
    transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
    background: #fff;
    color: var(--roxo);
}

.case-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 8px 32px #49015033;
    border: 2px solid var(--roxo);
}

.theme-dark .case-card {
    background: #2a002e;
    color: var(--laranja);
    border: none;
}

.theme-dark .case-card:hover {
    border: 2px solid var(--laranja);
    background: #490150;
    color: var(--laranja);
}

.case-title {
    color: var(--roxo);
    font-weight: 700;
    font-family: 'Montserrat', Arial, sans-serif;
    transition: color 0.3s;
}

.theme-dark .case-title {
    color: var(--laranja);
}

.case-desc {
    color: #333;
    font-size: 1rem;
    transition: color 0.3s;
}

.theme-dark .case-desc {
    color: var(--laranja);
}

/* Botão de tema */
.theme-toggle-btn {
    position: absolute;
    right: 20px;
    top: 16px;
    z-index: 10;
    background: var(--laranja);
    color: var(--roxo);
    border: 2px solid var(--roxo);
    border-radius: 20px;
    padding: 6px 18px;
    font-weight: 700;
    font-family: 'Montserrat', Arial, sans-serif;
    box-shadow: 0 2px 8px #49015022;
    transition: background 0.2s, color 0.2s;
}

.theme-toggle-btn:hover {
    background: var(--roxo);
    color: var(--laranja);
}

.theme-dark .theme-toggle-btn {
    background: var(--roxo);
    color: var(--laranja);
}

.theme-dark .theme-toggle-btn:hover {
    background: var(--laranja);
    color: var(--roxo);
}

.bg-materials {
    position: relative;
    background: url('image/bg-material.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}
.bg-quem-somos {
    position: relative;
    background: url('image/evento.jpeg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.bg-quem-somos::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    /* ajuste a cor e opacidade conforme o tema */
    z-index: 0;
}
.bg-materials::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    /* ajuste a cor e opacidade conforme o tema */
    z-index: 0;
}

.bg-materials>.container {
    position: relative;
    z-index: 1;
}
.bg-quem-somos>.container {
    position: relative;
    z-index: 1;
}

/* Torna o texto da section laranja no modo dark */
.theme-dark .bg-materials,
.theme-dark .bg-materials * {
    color: var(--laranja) !important;
}
.theme-dark .bg-quem-somos,
.theme-dark .bg-quem-somos * {
    color: var(--laranja) !important;
}

.logo-dark {
    display: none;
}

.theme-dark .logo-light {
    display: none;
}

.theme-dark .logo-dark {
    display: inline-block;
}

/* Ajustes no carousel */
.carousel,
.carousel-inner,
.carousel-item {
    height: auto !important;
    min-height: 1px !important;
}

.carousel-item {
    display: block !important;
    transition: none !important;
    /* evita animação de altura */
}

.carousel-inner {
    overflow: visible !important;
}

.section-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s, transform 0.7s;
}
.section-fade.visible {
    opacity: 1;
    transform: none;
}

/* Hero Section com Efeitos Avançados - SEM TEMA */
.hero-subtitle {
    font-size: 2.2rem !important; /* Aumentou a fonte do primeiro parágrafo */
    font-weight: 600;
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.3;
}

.hero-description {
    font-size: 1.4rem !important; /* Aumentou a fonte do segundo parágrafo */
    line-height: 1.6;
    color: #666;
    font-weight: 400;
}

.theme-dark .hero-description {
    color: #ccc;
}

/* Efeito de digitação - FIXO */
.typing-effect {
    border-right: 3px solid var(--roxo);
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 0;
    animation: typing 3.5s steps(50, end) forwards, 
               blink-caret 0.75s step-end infinite,
               gradient-shift 4s ease-in-out infinite;
    /* Gradiente fixo */
    background: linear-gradient(45deg, var(--roxo), var(--laranja), var(--roxo));
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--roxo); }
}

@keyframes gradient-shift {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efeito de brilho nas palavras-chave - FIXO */
.hero-description {
    position: relative;
}

.hero-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 121, 1, 0.2) 25%, 
        rgba(73, 1, 80, 0.2) 50%, 
        rgba(255, 121, 1, 0.2) 75%, 
        transparent 100%);
    opacity: 0;
    animation: textShimmer 3s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes textShimmer {
    0% { 
        opacity: 0;
        transform: translateX(-100%);
    }
    50% { 
        opacity: 1;
        transform: translateX(0%);
    }
    100% { 
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Efeito de partículas no fundo - FIXO */
.bg-materials::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--laranja), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--roxo), transparent),
        radial-gradient(1px 1px at 190px 40px, var(--laranja), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--roxo), transparent);
    background-repeat: repeat;
    background-size: 300px 300px;
    animation: particles 20s linear infinite;
    opacity: 0.1;
    pointer-events: none;
}
.bg-quem-somos::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--laranja), transparent),
        radial-gradient(2px 2px at 40px 70px, var(--roxo), transparent),
        radial-gradient(1px 1px at 190px 40px, var(--laranja), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--roxo), transparent);
    background-repeat: repeat;
    background-size: 300px 300px;
    animation: particles 20s linear infinite;
    opacity: 0.1;
    pointer-events: none;
}

@keyframes particles {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-300px, -300px); }
}

/* Responsividade */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 1.6rem !important;
    }
    
    .hero-description {
        font-size: 1.1rem !important;
    }
    
    .typing-effect {
        white-space: normal;
        animation: none;
        border-right: none;
        width: auto;
        background: none;
        background-clip: initial;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        color: var(--roxo);
    }
    
    .bg-materials::after {
        display: none;
    }
    .bg-quem-somos::after {
        display: none;
    }
}

/* Botão específico da seção hero - FIXO, sem tema */
#heroContactBtn {
    background-color: var(--roxo) !important;
    color: var(--laranja) !important;
    border: 2px solid var(--roxo) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

#heroContactBtn:hover,
#heroContactBtn:focus {
    background-color: var(--laranja) !important;
    color: var(--roxo) !important;
    border: 2px solid var(--laranja) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(73, 1, 80, 0.3);
}

/* Garantir que o tema NÃO afete o botão hero */
.theme-dark #heroContactBtn {
    background-color: var(--roxo) !important;
    color: var(--laranja) !important;
    border: 2px solid var(--roxo) !important;
}

.theme-dark #heroContactBtn:hover,
.theme-dark #heroContactBtn:focus {
    background-color: var(--laranja) !important;
    color: var(--roxo) !important;
    border: 2px solid var(--laranja) !important;
}

/* Cards de Serviços */
.service-card {
    background: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(73, 1, 80, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(73, 1, 80, 0.2);
    border: 2px solid var(--laranja);
}

.theme-dark .service-card {
    background: #2a002e;
    color: var(--laranja);
}

.theme-dark .service-card:hover {
    background: #490150;
    border: 2px solid var(--laranja);
}

.service-icon {
    font-size: 3rem;
    color: var(--laranja);
    margin-bottom: 1rem;
}

.service-title {
    color: var(--roxo);
    font-weight: 700;
    font-family: 'Montserrat', Arial, sans-serif;
    margin-bottom: 1rem;
}

.theme-dark .service-title {
    color: var(--laranja);
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(73, 1, 80, 0.1);
    position: relative;
    padding-left: 1.5rem;
}

.service-list li:before {
    content: "✓";
    color: var(--laranja);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.service-list li:last-child {
    border-bottom: none;
}

.theme-dark .service-list li {
    border-bottom-color: rgba(255, 121, 1, 0.2);
}

.service-price {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--laranja);
}

/* ========================================
   CARTA DE SERVIÇOS - ESTILOS ESPECÍFICOS
   ======================================== */

/* Hero da Carta de Serviços */
.services-hero {
    background: linear-gradient(135deg, rgba(73, 1, 80, 0.05) 0%, rgba(255, 121, 1, 0.05) 100%);
    position: relative;
    overflow: hidden;
}

.services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23490150" opacity="0.1"/><circle cx="30" cy="30" r="1" fill="%23FF7901" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="%23490150" opacity="0.1"/><circle cx="70" cy="50" r="1" fill="%23FF7901" opacity="0.1"/><circle cx="90" cy="30" r="1" fill="%23490150" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
    pointer-events: none;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.hero-image i {
    font-size: 200px;
    color: var(--laranja);
    opacity: 0.3;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Estatísticas do Hero */
.hero-stats {
    margin-top: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.theme-dark .stat-card {
    background: rgba(73, 1, 80, 0.9);
    color: var(--laranja);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--roxo);
    font-family: 'Montserrat', Arial, sans-serif;
}

.theme-dark .stat-number {
    color: var(--laranja);
}

.stat-label {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: #666;
}

.theme-dark .stat-label {
    color: #ccc;
}

/* Categorias de Serviços */
.service-category {
    margin-bottom: 4rem;
    padding: 2rem 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 3rem 2rem;
}

.theme-dark .service-category {
    background: linear-gradient(135deg, rgba(42, 0, 46, 0.8) 0%, rgba(73, 1, 80, 0.9) 100%);
}

.category-title {
    color: var(--roxo);
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 3px solid var(--laranja);
    padding-bottom: 1rem;
}

.theme-dark .category-title {
    color: var(--laranja);
}

.category-title i {
    color: var(--laranja);
    font-size: 2.5rem;
}

/* Cards Detalhados de Serviços */
.service-detail-card {
    background: #fff;
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 6px 25px rgba(73, 1, 80, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.service-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--roxo), var(--laranja));
}

.service-detail-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(73, 1, 80, 0.2);
    border: 2px solid var(--laranja);
}

.theme-dark .service-detail-card {
    background: #2a002e;
    color: var(--laranja);
}

.theme-dark .service-detail-card:hover {
    background: #490150;
    box-shadow: 0 12px 40px rgba(255, 121, 1, 0.2);
}

.service-detail-card h4 {
    color: var(--roxo);
    font-weight: 700;
    font-family: 'Montserrat', Arial, sans-serif;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.theme-dark .service-detail-card h4 {
    color: var(--laranja);
}

.service-detail-card p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.theme-dark .service-detail-card p {
    color: #ccc;
}

/* Lista de Características do Serviço */
.service-features {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.service-features li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
    color: #555;
    border-bottom: 1px solid rgba(73, 1, 80, 0.1);
}

.service-features li:before {
    content: "✓";
    color: var(--laranja);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0.5rem;
}

.service-features li:last-child {
    border-bottom: none;
}

.theme-dark .service-features li {
    color: #ddd;
    border-bottom-color: rgba(255, 121, 1, 0.2);
}

/* Preço e Prazo */
.service-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--laranja);
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.service-delivery {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
}

.theme-dark .service-delivery {
    color: #aaa;
}

/* Timeline do Processo */
.process-timeline {
    margin-top: 2rem;
}

.process-step {
    text-align: center;
    position: relative;
    padding: 2rem 1rem;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 100%;
}

.process-step:hover {
    transform: translateY(-5px);
}

.theme-dark .process-step {
    background: #2a002e;
    color: var(--laranja);
}

.process-number {
    width: 60px;
    height: 60px;
    background: var(--laranja);
    color: var(--roxo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.process-step h4 {
    color: var(--roxo);
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.theme-dark .process-step h4 {
    color: var(--laranja);
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

.theme-dark .process-step p {
    color: #ccc;
}

/* CTA Section Melhorada */
.cta-section {
    background: linear-gradient(135deg, var(--roxo) 0%, #490150 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 121, 1, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-primary {
    background: var(--laranja);
    color: var(--roxo);
    border: 2px solid var(--laranja);
    padding: 15px 30px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
}

.btn-cta-primary:hover {
    background: transparent;
    color: var(--laranja);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 121, 1, 0.3);
}

.btn-outline-light {
    border: 2px solid white;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    font-family: 'Montserrat', Arial, sans-serif;
}

.btn-outline-light:hover {
    background: white;
    color: var(--roxo);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* Responsividade para Carta de Serviços */
@media (max-width: 768px) {
    .services-hero {
        text-align: center;
    }
    
    .hero-image {
        height: 200px;
        margin-top: 2rem;
    }
    
    .hero-image i {
        font-size: 120px;
    }
    
    .category-title {
        font-size: 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .category-title i {
        font-size: 2rem;
    }
    
    .service-category {
        padding: 2rem 1rem;
    }
    
    .service-detail-card {
        margin-bottom: 2rem;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-cta-primary,
    .btn-outline-light {
        width: 250px;
        text-align: center;
    }
}

/* ========================================
   ANIMAÇÕES PARA CARTA DE SERVIÇOS
   ======================================== */

/* Títulos das categorias - ESTÁTICOS */
.category-title {
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
}

/* Cards dos serviços - ANIMAÇÃO DA DIREITA PARA ESQUERDA */
.service-detail-card {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

/* Estado visível dos cards */
.service-detail-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Delay escalonado para os cards */
.service-detail-card:nth-child(1) { transition-delay: 0.1s; }
.service-detail-card:nth-child(2) { transition-delay: 0.2s; }
.service-detail-card:nth-child(3) { transition-delay: 0.3s; }
.service-detail-card:nth-child(4) { transition-delay: 0.4s; }

/* Para cards em linha */
.row .col-lg-6:nth-child(1) .service-detail-card { transition-delay: 0.1s; }
.row .col-lg-6:nth-child(2) .service-detail-card { transition-delay: 0.3s; }
.row .col-lg-6:nth-child(3) .service-detail-card { transition-delay: 0.5s; }
.row .col-lg-6:nth-child(4) .service-detail-card { transition-delay: 0.7s; }

/* Animação para os process steps */
.process-step {
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.process-step.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.process-step:nth-child(1) { transition-delay: 0.1s; }
.process-step:nth-child(2) { transition-delay: 0.2s; }
.process-step:nth-child(3) { transition-delay: 0.3s; }
.process-step:nth-child(4) { transition-delay: 0.4s; }

/* Efeito adicional para o hover dos cards animados */
.service-detail-card.animate-in:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 45px rgba(73, 1, 80, 0.25);
}

/* Stats cards também com animação */
.stat-card {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stat-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.stat-card:nth-child(1) { transition-delay: 0.1s; }
.stat-card:nth-child(2) { transition-delay: 0.2s; }
.stat-card:nth-child(3) { transition-delay: 0.3s; }
.stat-card:nth-child(4) { transition-delay: 0.4s; }

/* Animação para CTA buttons */
.cta-buttons a {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cta-buttons a.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.cta-buttons a:first-child { transition-delay: 0.1s; }
.cta-buttons a:last-child { transition-delay: 0.3s; }

/* ========================================
   ANIMAÇÕES PARA PÁGINA INICIAL
   ======================================== */

/* Service cards - ANIMAÇÃO DA DIREITA PARA ESQUERDA */
.service-card {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

/* Estado visível dos service cards */
.service-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Case cards - ANIMAÇÃO DA DIREITA PARA ESQUERDA */
.case-card {
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

.case-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Area cards do carrossel - ANIMAÇÃO DA DIREITA PARA ESQUERDA */
.area-card {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0s;
}

.area-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Delay escalonado para service cards */
.service-card:nth-child(1) { transition-delay: 0.1s; }
.service-card:nth-child(2) { transition-delay: 0.2s; }
.service-card:nth-child(3) { transition-delay: 0.3s; }
.service-card:nth-child(4) { transition-delay: 0.4s; }
.service-card:nth-child(5) { transition-delay: 0.5s; }
.service-card:nth-child(6) { transition-delay: 0.6s; }

/* Para cards em grid */
.row .col-lg-4:nth-child(1) .service-card { transition-delay: 0.1s; }
.row .col-lg-4:nth-child(2) .service-card { transition-delay: 0.3s; }
.row .col-lg-4:nth-child(3) .service-card { transition-delay: 0.5s; }
.row .col-lg-4:nth-child(4) .service-card { transition-delay: 0.7s; }
.row .col-lg-4:nth-child(5) .service-card { transition-delay: 0.9s; }
.row .col-lg-4:nth-child(6) .service-card { transition-delay: 1.1s; }

/* Efeito hover aprimorado para cards animados */
.service-card.animate-in:hover,
.case-card.animate-in:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 45px rgba(73, 1, 80, 0.25);
}

.area-card.animate-in:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 10px 30px rgba(73, 1, 80, 0.2);
}

/* Animação suave para transições do carrossel */
.carousel-item {
    transition: transform 0.6s ease-in-out;
}

/* Estilo aprimorado para controles do carrossel */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--roxo);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.theme-dark .carousel-control-prev-icon,
.theme-dark .carousel-control-next-icon {
    background-color: var(--laranja);
}

/* Responsividade para as animações */
@media (max-width: 768px) {
    .service-card,
    .case-card,
    .area-card {
        transform: translateX(40px);
    }
    
    .service-card.animate-in,
    .case-card.animate-in,
    .area-card.animate-in {
        transform: translateX(0);
    }
    
    /* Reduz delays em mobile para melhor performance */
    .service-card:nth-child(n) { transition-delay: 0.05s; }
    .case-card:nth-child(n) { transition-delay: 0.1s; }
    .area-card:nth-child(n) { transition-delay: 0.05s; }
}

/* Reduz movimento em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .case-card,
    .area-card {
        transform: none;
        transition: opacity 0.3s ease;
    }
    
    .service-card.animate-in,
    .case-card.animate-in,
    .area-card.animate-in {
        transform: none;
    }
    
    .carousel-item {
        transition: none;
    }
}

/* Melhorias visuais para o carrossel */
.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--roxo);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.theme-dark .carousel-indicators [data-bs-target] {
    background-color: var(--laranja);
}

/* Animação para botões CTA */
.btn.animate-in {
    animation: slideInFromRight 0.6s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   CARDS DE ÁREAS DE ATUAÇÃO - SEM ZOOM E SEM BLUR
   ======================================== */

.area-card-header {
    height: 160px; /* Reduzi a altura para melhor proporção */
    background-size: contain; /* Mudei para contain - mostra a imagem completa */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    background-color: #f8f9fa; /* Cor de fundo para preencher espaços */
}

.area-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(73, 1, 80, 0.2) 0%, 
        rgba(255, 121, 1, 0.05) 100%
    );
    /* REMOVIDO: backdrop-filter: blur(0.5px); */
    z-index: 1;
}

.area-card-header .area-icon {
    font-size: 3rem; /* Reduzi o tamanho */
    color: white;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
    background: rgba(73, 1, 80, 0.9);
    border-radius: 50%;
    width: 70px; /* Reduzi o tamanho */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* REMOVIDO: backdrop-filter: blur(15px); */
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.area-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(73, 1, 80, 0.12);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateX(60px);
    border: 1px solid rgba(73, 1, 80, 0.1);
    height: 100%;
}

.area-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.area-card:hover {
    transform: translateY(-8px) scale(1.01); /* Reduzi o scale */
    box-shadow: 0 15px 40px rgba(73, 1, 80, 0.2); /* Reduzi a sombra */
}

.area-card:hover .area-card-header::before {
    background: linear-gradient(135deg, 
        rgba(73, 1, 80, 0.15) 0%, 
        rgba(255, 121, 1, 0.1) 100%
    );
}

.area-card:hover .area-icon {
    transform: scale(1.1); /* Reduzi o scale */
    background: rgba(255, 121, 1, 0.9);
    color: var(--roxo);
}

.area-card-body {
    padding: 2rem 1.5rem;
    min-height: 160px; /* Aumentei já que o header é menor */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
}

.area-card-body h5 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.area-card-body p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* Tema escuro para os cards */
.theme-dark .area-card {
    background: #2a002e;
    border-color: rgba(255, 121, 1, 0.2);
}

.theme-dark .area-card-body {
    background: #2a002e;
}

.theme-dark .area-card-body h5 {
    color: var(--laranja);
}

.theme-dark .area-card-body p {
    color: #e0e0e0;
}

.theme-dark .area-card:hover {
    background: #490150;
    box-shadow: 0 15px 40px rgba(255, 121, 1, 0.2);
}

.theme-dark .area-card-header {
    background-color: #1a0015;
}

.theme-dark .area-card_header::before {
    background: linear-gradient(135deg, 
        rgba(255, 121, 1, 0.2) 0%, 
        rgba(73, 1, 80, 0.05) 100%
    );
}

.theme-dark .area-card:hover .area-icon {
    background: rgba(73, 1, 80, 0.9);
    color: var(--laranja);
}

/* SEMPRE mostrar a imagem inteira, sem zoom, em todas as telas */
.area-card-header {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
@media (max-width: 768px) {
    .area-card-header {
        background-size: contain !important;
    }
}

/* Responsividade otimizada */
@media (max-width: 1400px) {
    .area-card-header {
        height: 140px;
    }
    
    .area-card-header .area-icon {
        font-size: 2.8rem;
        width: 65px;
        height: 65px;
    }
}

@media (max-width: 992px) {
    .area-card-header {
        height: 120px;
    }
    
    .area-card-header .area-icon {
        font-size: 2.5rem;
        width: 60px;
        height: 60px;
    }
    
    .area-card-body {
        padding: 1.5rem 1.25rem;
        min-height: 140px;
    }
    
    .area-card-body h5 {
        font-size: 1.1rem;
    }
    
    .area-card-body p {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .area-card-header {
        height: 100px;
        background-size: cover; /* Em mobile uso cover para melhor aproveitamento */
    }
    
    .area-card-header .area-icon {
        font-size: 2rem;
        width: 50px;
        height: 50px;
    }
    
    .area-card-body {
        padding: 1.25rem 1rem;
        min-height: 120px;
    }
    
    .area-card-body h5 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .area-card-body p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .area-card {
        transform: translateX(40px);
    }
    
    .area-card.animate-in {
        transform: translateX(0);
    }
    
    .area-card:hover {
        transform: translateY(-3px) scale(1.005); /* Muito sutil em mobile */
    }
}

/* Para telas muito grandes - com contain */
@media (min-width: 1600px) {
    .area-card-header {
        height: 180px; /* Menor que antes */
    }
    
    .area-card-header .area-icon {
        font-size: 3.5rem;
        width: 80px;
        height: 80px;
    }
    
    .area-card-body {
        padding: 2.5rem 2rem;
        min-height: 180px;
    }
    
    .area-card-body h5 {
        font-size: 1.3rem;
    }
    
    .area-card-body p {
        font-size: 1.1rem;
    }
}

/* Animação escalonada para os cards */
.row .col-lg-4:nth-child(1) .area-card { transition-delay: 0.1s; }
.row .col-lg-4:nth-child(2) .area-card { transition-delay: 0.2s; }
.row .col-lg-4:nth-child(3) .area-card { transition-delay: 0.3s; }
.row .col-lg-4:nth-child(4) .area-card { transition-delay: 0.4s; }
.row .col-lg-4:nth-child(5) .area-card { transition-delay: 0.5s; }
.row .col-lg-4:nth-child(6) .area-card { transition-delay: 0.6s; }

/* Fallback para quando a imagem não carrega */
.area-card-header {
    background: linear-gradient(135deg, var(--roxo) 0%, var(--laranja) 100%);
}

/* Otimização para performance - SEM TRANSFORM NO HEADER */
.area-card-header {
    will-change: auto; /* Removido will-change para evitar blur */
}

/* REMOVIDO: transform no hover do header para evitar blur */
.area-card:hover .area-card-header {
    /* Removido transform para evitar embaçamento */
}

/* Ajuste especial para imagens nítidas */
.area-card-header {
    background-attachment: scroll;
    /* REMOVIDO: image-rendering para melhor qualidade */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Alternativa: se ainda quiser usar cover mas com menos zoom */
/* Descomente as linhas abaixo e comente o background-size: contain acima */
/*
.area-card-header {
    background-size: 80%; 
    background-position: center;
}
*/

/* Exclusivo para o footer SMAT */
.smat-footer {
    background: linear-gradient(135deg, #2a002e 0%, #490150 100%);
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    margin-top: 40px;
    box-shadow: 0 -2px 24px rgba(73,1,80,0.12);
}

.smat-footer-main {
    max-width: 1200px;
}

.smat-footer-logo {
    max-width: 160px;
    filter: drop-shadow(0 2px 8px rgba(255,121,1,0.12));
}

.smat-footer-title {
    color: #ff7901;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
    font-size: 1.1rem;
}

.smat-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.smat-footer-list li {
    margin-bottom: 10px;
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.smat-footer-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.smat-footer-link:hover {
    color: #ff7901;
    text-decoration: underline;
}

.smat-footer-icon {
    color: #ff7901;
    font-size: 1.1em;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    margin-right: 4px;
}

.smat-footer-desc {
    color: #ff7901;
    font-size: 1rem;
    margin-top: 10px;
}

.smat-footer-bottom {
    background: rgba(0,0,0,0.10);
    color: #ff7901;
    text-align: center;
    padding: 14px 0 10px 0;
    font-size: 1rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 991px) {
    .smat-footer-main .row > div {
        margin-bottom: 24px;
    }
    .smat-footer-logo {
        margin-bottom: 16px;
    }
}

@media (max-width: 767px) {
    .smat-footer-main {
        padding-left: 10px;
        padding-right: 10px;
    }
    .smat-footer-title {
        margin-top: 18px;
    }
    .smat-footer-list li {
        font-size: 0.98rem;
    }
}

/* Timeline ajustada */
.timeline-box {
    width: 100%;
    max-width: 1100px;
    min-height: 480px;
    background: #f6f7f9;
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(73, 1, 80, 0.10);
    padding: 48px 40px 48px 120px;
    position: relative;
    border: 2px solid #ff7a00;
    margin: 0 auto;
    overflow-y: auto;
}

.timeline-vertical-line {
    position: absolute;
    left: 70px;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #ff7a00 0%, #6c2eb7 100%);
    border-radius: 3px;
    z-index: 0;
}

.timeline-list {
    position: relative;
    margin: 0;
    padding: 0;
}

.timeline-item {
    display: flex;
    align-items: center;
    min-height: 220px;
    position: relative;
    margin-bottom: 56px;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s, transform 0.8s;
    z-index: 2;
}

.timeline-item.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.timeline-year {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ff7a00 60%, #6c2eb7 100%);
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    padding: 18px 0;
    border-radius: 50%;
    box-shadow: 0 4px 16px #ff7a0033;
    z-index: 2;
    border: 4px solid #fff;
    text-align: center;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s, transform 0.3s;
}

.timeline-year:hover {
    box-shadow: 0 0 0 10px #ff7a0033;
    transform: scale(1.08);
}

.timeline-photo-wrapper {
    flex-shrink: 0;
    margin-right: 40px;
    position: relative;
}

.timeline-photo {
    width: 420px;
    height: 260px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 4px 24px rgba(73,1,80,0.10);
    background: #fff;
    cursor: pointer;
    transition: transform 0.4s, box-shadow 0.4s;
    border: 4px solid #fff;
}

.timeline-photo:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 32px rgba(73,1,80,0.18);
    border-color: #ff7a00;
}

.timeline-content {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(73,1,80,0.06);
    padding: 28px 36px;
    min-width: 0;
    flex: 1;
    font-size: 1.25rem;
    color: #490150;
    z-index: 2;
    border-left: 5px solid #ff7a00;
    margin-left: -10px;
    transition: box-shadow 0.3s;
}

.timeline-content:hover {
    box-shadow: 0 4px 24px #ff7a0033;
}

@media (max-width: 900px) {
    .timeline-box {
        padding-left: 30px;
        padding-right: 10px;
    }
    .timeline-photo-wrapper {
        margin-right: 0;
        margin-bottom: 18px;
    }
    .timeline-photo {
        width: 100%;
        height: 180px;
    }
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        min-height: 120px;
    }
    .timeline-year {
        position: static;
        transform: none;
        margin-bottom: 8px;
        font-size: 1.1rem;
        padding: 10px 16px;
        width: auto;
        height: auto;
        border-radius: 20px;
        box-shadow: none;
        border-width: 2px;
    }
    .timeline-content {
        padding: 16px 10px;
        font-size: 1.05rem;
        margin-left: 0;
        border-left: 0;
        border-top: 4px solid #ff7a00;
    }
    .timeline-vertical-line {
        left: 10px;
        width: 3px;
        top: 20px;
        height: calc(100% - 40px);
    }
}

/* Modal para imagem */
.timeline-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
}
.timeline-modal.active {
    display: flex;
}
.timeline-modal img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 24px;
    box-shadow: 0 8px 40px #49015088;
}
.timeline-modal .close-btn {
    position: absolute;
    top: 32px;
    right: 48px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 10001;
}