/* =========================================
   ANIMAÇÃO DE SCROLL REVEAL
========================================= */

/* Estado inicial: Invisível e levemente empurrado para baixo */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    /* Começa 40px abaixo do local original */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    /* Transição suave e moderna */
}

/* Estado final: Visível e na posição correta */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Efeitos de atraso opcionais para elementos que aparecem juntos (Efeito cascata) */
.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* =========================================
   VARIÁVEIS GLOBAIS (CORES E FONTES)
========================================= */
:root {
    --color-dark: #1e293b;
    /* Cinza escuro principal */
    --color-accent: #10b981;
    /* Verde Esmeralda (destaque) */
    --color-light: #f8fafc;
    /* Fundo muito claro */
    --color-gray: #64748b;
    /* Cinza para textos secundários */
    --text-white: #ffffff;
    --font-base: 'Segoe UI', system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-base);
}

/* =========================================
   CONTROLE DE LOGO (Dia / Noite)
   ========================================= */

/* Comportamento Padrão (Modo Claro) */
.logo-escura {
    display: none;
    /* Esconde a logo noturna de dia */
}

.logo-clara {
    display: block;
    /* Garante que a logo normal apareça (ou inline-block dependendo do seu layout) */
}


/* Comportamento no Modo Noturno */
body.dark-mode .logo-clara {
    display: none;
    /* Esconde a logo normal */
}

body.dark-mode .logo-escura {
    display: block;
    /* Revela a logo noturna */
}

/* =========================================
   CONTROLE DA LOGO DO HEADER (Dia / Noite)
   ========================================= */

/* 1. Estado Padrão (Modo Claro) */
.logo-dark {
    display: none;
    /* Esconde a logo noturna de dia */
}

.logo-light {
    display: block;
    /* Garante que a logo normal apareça */
}

/* 2. Estado Modo Noturno */
body.dark-mode .logo-light {
    display: none;
    /* Esconde a logo normal quando escurecer */
}

body.dark-mode .logo-dark {
    display: block;
    /* Revela a logo noturna */
}

/* Estado Normal (Dia) */
#logo-dark {
    display: none !important;
}

#logo-light {
    display: block !important;
}

/* Estado Modo Noturno (Ativado pelo JS às 22h) */
body.dark-mode #logo-light {
    display: none !important;
}

body.dark-mode #logo-dark {
    display: block !important;
}

body {
    background-color: var(--color-light);
}

html {
    scroll-behavior: smooth;
}

#catalogo {
    scroll-margin-top: 100px;
    /* Ajuste esse valor de acordo com a altura do seu header */
}

/* PRELOADER PREMIUM */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* Fundo branco para destacar a logo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loader-logo {
    max-height: 80px;
    width: auto;
    /* Efeito de pulsação suave */
    animation: logoPulse 1.5s ease-in-out infinite;
}

.loader-bar-container {
    width: 150px;
    height: 4px;
    background-color: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    animation: loadingBar 2s ease-in-out infinite;
}

.loader-content p {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Animações */
@keyframes logoPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

@keyframes loadingBar {
    0% {
        width: 0%;
        margin-left: 0;
    }

    50% {
        width: 100%;
        margin-left: 0;
    }

    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* Dark Mode Preloader */
body.dark-mode .preloader {
    background-color: #0f172a;
}

/* =========================================
   LINHA SUPERIOR (LOGO, BUSCA, CONTATO)
========================================= */
.header-top {
    background-color: var(--text-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    gap: 30px;
}

.logo-area img {
    max-height: 55px;
    display: block;
}

/* =========================================
   GRUPO LOGO E REDES SOCIAIS
========================================= */
.logo-social-group {
    display: flex;
    align-items: center;
    gap: 30px;
    /* Define a distância entre a logo e os ícones */
}

/* =========================================
   ESTRUTURA: LOGO E REDES SOCIAIS
========================================= */
.header-socials {
    display: flex;
    align-items: center;
    gap: 12px; /* Espaço elegante entre os botões */
    border-left: 2px solid #e2e8f0; /* Linha sutil separando da logo */
    padding-left: 20px;
    height: 40px; /* Alinha perfeitamente com o tamanho dos botões */
}

/* O Formato de Botão Premium */
.header-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: #f8fafc;
    color: #64748b;
    border-radius: 10px; /* Bordas modernas */
    font-size: 16px; /* Tamanho exato para não brigar com a logo */
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Efeito de Levantar no Hover (Comum a todos) */
.header-socials a:hover {
    transform: translateY(-4px);
    color: #ffffff;
    border-color: transparent;
}

/* Cores Oficiais das Marcas no Hover */
.header-socials a[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 6px 15px rgba(220, 39, 67, 0.25);
}

.header-socials a[aria-label="Facebook"]:hover {
    background-color: #1877F2;
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.25);
}

/* =========================================
   MODO ESCURO (DARK MODE)
========================================= */
body.dark-mode .logo-social-group .header-socials {
    border-left-color: #334155; /* Escurece a divisória */
}

body.dark-mode .header-socials a {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}
/* No Dark Mode, o Hover continua puxando as cores oficiais das marcas! */


/* =========================================
   RESPONSIVIDADE: TABLETS E CELULARES
========================================= */

/* Tablets e Telas Médias */
@media (max-width: 992px) {
    .logo-social-group {
        gap: 15px;
    }
    .header-socials {
        gap: 8px;
        padding-left: 15px;
    }
}

/* Celulares Menores (Mudança Estrutural) */
@media (max-width: 480px) {
    .logo-social-group {
        flex-direction: column;
        gap: 12px;
    }

    .header-socials {
        border-left: none; /* Remove a linha vertical */
        padding-left: 0;
        
        border-top: 1px solid #e2e8f0; /* Adiciona a linha horizontal em cima */
        padding-top: 12px;
        width: 100%;
        justify-content: center; /* Centraliza os botõezinhos embaixo da logo */
        height: auto;
    }

    /* Linha horizontal escura no Dark Mode para celulares */
    body.dark-mode .header-socials {
        border-top-color: #334155;
    }
}

.email-link {
    text-decoration: none;
    /* Remove o sublinhado */
    color: inherit;
    /* Mantém a cor original do texto */
    transition: all 0.3s ease;
    display: block;
    /* Garante que o link ocupe a linha toda */
}

.email-link strong {
    font-size: 1.1rem;
    /* Deixa o e-mail levemente maior */
    color: #1e293b;
    /* Cor padrão */
}

.email-link:hover strong {
    color: #10b981;
    /* Muda para o verde da Mabel S.A. ao passar o mouse */
}

/* Ajuste para o Modo Noturno */
body.dark-mode .email-link strong {
    color: #f8fafc;
}

body.dark-mode .email-link:hover strong {
    color: #10b981;
}

/* Informações de Contato */
.contact-area {
    display: flex;
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-item i {
    font-size: 1.8rem;
    color: var(--color-accent);
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-text span {
    font-size: 0.75rem;
    color: var(--color-gray);
    text-transform: uppercase;
    font-weight: 600;
}

.contact-text strong {
    font-size: 0.95rem;
    color: var(--color-dark);
}

/* =========================================
   LINHA INFERIOR (NAVEGAÇÃO)
========================================= */
.header-nav {
    background-color: var(--color-dark);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.mobile-toggle {
    display: none;
    /* Oculto no Desktop */
    background: transparent;
    border: none;
    color: var(--text-white);
    font-size: 1.2rem;
    padding: 15px 0;
    cursor: pointer;
    font-weight: 600;
}

/* Lista do Menu */
.nav-menu {
    list-style: none;
    display: flex;
}

.nav-menu>li>a {
    display: block;
    color: var(--text-white);
    text-decoration: none;
    padding: 18px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    transition: color 0.3s;
}

/* Efeito de hover original: linha crescendo embaixo */
.nav-menu>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-menu>li>a:hover::after,
.nav-menu>li>a.current::after {
    width: 100%;
}

.nav-menu>li>a:hover,
.nav-menu>li>a.current {
    color: var(--color-accent);
}

/* Submenu (Dropdown) */
.has-dropdown {
    position: relative;
}

.has-dropdown i {
    font-size: 0.8rem;
    margin-left: 5px;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0f172a;
    /* Um tom ainda mais escuro */
    list-style: none;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 99;
    border-top: 3px solid var(--color-accent);
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown li a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, color 0.2s;
}

.dropdown li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-accent);
}

/* Destaque "Trabalhe Conosco" */
.nav-highlight a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-highlight a:hover {
    text-decoration: underline;
}

/* =========================================
   RESPONSIVIDADE (Telas menores que 992px)
========================================= */
@media (max-width: 992px) {
    .header-top {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .search-area {
        width: 100%;
        max-width: 100%;
    }

    .hide-on-mobile {
        display: none;
        /* Esconde o email no celular para poupar espaço */
    }

    .nav-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-highlight {
        display: none;
        /* Esconde no menu mobile para simplificar */
    }

    .mobile-toggle {
        display: block;
        width: 100%;
        text-align: left;
        padding: 15px 5%;
    }

    /* Oculta o menu por padrão no mobile */
    .nav-menu {
        flex-direction: column;
        width: 100%;
        display: none;
    }

    /* Mostra o menu quando ativado via JS */
    .nav-menu.active {
        display: flex;
    }

    .nav-menu>li>a {
        padding: 15px 5%;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Ajuste do Dropdown no Mobile */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        /* Fica oculto até clicar */
        background-color: #1e293b;
        border-top: none;
        padding-left: 20px;
    }

    .has-dropdown.open .dropdown {
        display: block;
        /* Mostra submenu ao clicar no JS */
    }
}


/* =========================================
   CARROSSEL DE MARCAS (3 POR VEZ)
========================================= */
.secao-marcas-cards {
    padding: 50px 20px;
    background-color: wite;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Cabeçalho --- */
.header-marcas-cards {
    text-align: center;
    margin-bottom: 30px;
}

.badge-marcas {
    display: inline-block;
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.header-marcas-cards h2 {
    font-size: 32px;
    color: #1e293b;
    margin-bottom: 10px;
}

.header-marcas-cards p {
    color: #64748b;
    font-size: 16px;
}

.destaque-verde {
    color: #10b981;
}

/* --- Carrossel e Track --- */
.carrossel-tres-container {
    position: relative;
    width: 100%;
}

.carrossel-tres-track {
    display: flex;
    gap: 20px;
    /* Espaço entre os cartões */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Faz os cartões pararem perfeitamente no centro */
    scroll-behavior: smooth;
    padding-bottom: 20px;
    /* Espaço para a sombra não cortar */

    /* Esconde a barra de rolagem feia do Windows */
    scrollbar-width: none;
}

.carrossel-tres-track::-webkit-scrollbar {
    display: none;
}

/* --- O Cartão --- */
.card-marca {
    /* Mostra 3 cartões no PC (100% / 3) menos o espaço do gap */
    flex: 0 0 calc((100% / 3) - 14px);
    scroll-snap-align: start;
    /* Para o cartão exatamente no início */

    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-marca:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.img-box {
    height: 140px;
    /* Altura da área da imagem */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.info-box {
    padding: 15px 20px;
    text-align: center;
    background-color: #f8fafc;
}

.info-box h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 5px;
}

.info-box p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* --- Botões de Passar --- */
.btn-passar {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-passar:hover {
    background: #10b981;
    color: white;
}

.btn-passar.prev {
    left: -15px;
}

.btn-passar.next {
    right: -15px;
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {

    /* No Tablet, mostra 2 por vez */
    .card-marca {
        flex: 0 0 calc((100% / 2) - 10px);
    }
}

@media (max-width: 600px) {

    /* No Celular, mostra 1 por vez */
    .card-marca {
        flex: 0 0 100%;
    }

    .btn-passar {
        display: none;
    }

    /* Esconde botões no celular para o usuário usar o dedo */
}

/* =========================================
   MODO NOTURNO 
========================================= */
body.dark-mode .header-marcas-cards h2,
body.dark-mode .info-box h3 {
    color: #f8fafc;
}

body.dark-mode .header-marcas-cards p,
body.dark-mode .info-box p {
    color: #94a3b8;
}

body.dark-mode .card-marca {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.dark-mode .img-box {
    background-color: white;
    /* Fundo mais escuro para a foto no modo noite */
}

body.dark-mode .info-box {
    background-color: #1e293b;
}

body.dark-mode .btn-passar {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

body.dark-mode .btn-passar:hover {
    background: #10b981;
}

/* =========================================
   SEÇÃO: SOBRE A EMPRESA
========================================= */
.about-section {
    padding: 100px 5%;
    background-color: #ffffff;
    overflow: hidden;
    /* Evita que animações criem barra de rolagem horizontal */
}

/* Container com Grid (Duas colunas no PC) */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Divide meio a meio */
    gap: 60px;
    align-items: center;

    /* Classes iniciais para a animação do JavaScript */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quando o JS adicionar esta classe, a seção aparece */
.about-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Título */
.about-title {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 25px;
    font-weight: 800;
}

/* Cores específicas do título */
.color-green {
    color: #10b981;
}

/* Verde da imagem */
.color-blue {
    color: #3b82f6;
}

/* Azul da imagem */

.about-description {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Caixa de Destaque da Missão */
.mission-box {
    background-color: #f8fafc;
    border-left: 4px solid #10b981;
    /* Linha verde na esquerda */
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.mission-icon {
    font-size: 1.5rem;
    color: #3b82f6;
    /* Azul no ícone */
    margin-top: 5px;
}

.mission-box p {
    color: #334155;
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    /* Texto em itálico para destacar que é a missão */
}

/* Localização */
.about-location {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-weight: 500;
    margin-bottom: 35px;
}

.about-location i {
    color: #64748b;
    font-size: 1.2rem;
}

/* Botão Gradiente */
.btn-gradient {
    display: inline-block;
    background: linear-gradient(90deg, #10b981, #3b82f6);
    /* Gradiente Verde para Azul */
    color: #ffffff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-3px);
    /* Sobe ao passar o mouse */
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    /* Sombra aumenta */
}

/* =========================================
   COLUNA DA DIREITA: IMAGEM
========================================= */
.about-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
}

/* Quadrado decorativo atrás da imagem */
.image-backdrop {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));
    border-radius: 12px;
    z-index: 1;
}

.about-image {
    position: relative;
    z-index: 2;
    /* Fica acima do backdrop */
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
}

.about-image-wrapper:hover .about-image {
    transform: scale(1.02);
    /* Zoom leve na foto ao passar o mouse */
}

/* =========================================
   RESPONSIVIDADE (Telas menores)
========================================= */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        /* Muda para 1 coluna */
        gap: 40px;
        text-align: center;
        /* Centraliza o texto no celular */
    }

    .mission-box {
        text-align: left;
        /* Mantém a missão alinhada à esquerda para leitura */
    }

    .about-location {
        justify-content: center;
        /* Centraliza o ícone de mapa */
    }

    /* Esconde o efeito de fundo da imagem no celular para economizar espaço */
    .image-backdrop {
        display: none;
    }
}

/* =========================================
   SEÇÃO DESTAQUE (SERVIÇOS)
========================================= */
.services-hero {
    padding: 80px 5%;
    background-color: #f8fafc;
    /* Fundo cinza bem claro */
    position: relative;
    overflow: hidden;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Duas colunas do mesmo tamanho */
    gap: 60px;
    align-items: center;
}

/* --- TEXTOS E BOTÕES (LADO ESQUERDO) --- */
.services-text h1 {
    font-size: 3.5rem;
    color: #1e293b;
    margin-bottom: 5px;
    font-weight: 800;
    letter-spacing: -1px;
}

.services-text .subtitle {
    font-size: 1.3rem;
    color: #475569;
    font-weight: 400;
    margin-bottom: 25px;
}

.services-text p {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
}

/* Grupo de Botões */
.action-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    /* Permite quebrar linha em telas pequenas */
}

/* Estilo Base dos Botões */
.action-buttons a {
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 8px;
    /* Bordas menos arredondadas para um visual mais sério */
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* Botão Principal (Verde) */
.btn-primary {
    background-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover {
    background-color: #059669;
    transform: translateY(-2px);
}

/* Botão Secundário (Contorno Transparente) */
.btn-secondary {
    background-color: transparent;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}

.btn-secondary:hover {
    border-color: #1e293b;
    background-color: rgba(30, 41, 59, 0.05);
}

/* --- CARDS (LADO DIREITO) --- */
.services-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Espaço entre os cards */
}

/* Estilo individual do Card */
.service-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    /* Prepara para a animação do JS */
    opacity: 0;
    transform: translateX(50px);
}

/* Efeito ao passar o mouse no Card */
.service-card:hover {
    transform: translateX(10px) translateY(-2px) !important;
    /* Move levemente para a direita e cima */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

/* Caixa colorida do Ícone */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

/* Variações de cores dos ícones */
.icon-green {
    background-color: #d1fae5;
    color: #10b981;
}

.icon-blue {
    background-color: #dbeafe;
    color: #3b82f6;
}

.icon-purple {
    background-color: #f3e8ff;
    color: #a855f7;
}

/* Textos dentro do Card */
.card-info h4 {
    color: #1e293b;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.card-info span {
    color: #64748b;
    font-size: 0.95rem;
}

/* Classe de animação aplicada via JS */
.service-card.show-card {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   RESPONSIVIDADE
========================================= */
@media (max-width: 992px) {
    .services-container {
        grid-template-columns: 1fr;
        /* Quebra para apenas 1 coluna */
        gap: 50px;
        text-align: center;
    }

    .services-text p {
        max-width: 100%;
        margin: 0 auto 30px auto;
    }

    .action-buttons {
        justify-content: center;
        /* Centraliza os botões no celular */
    }

    /* Ajuste para os cards não ficarem esticados demais no celular */
    .services-cards-wrapper {
        align-items: center;
    }

    .service-card {
        width: 100%;
        max-width: 500px;
        text-align: left;
        /* Mantém o texto do card alinhado à esquerda */
    }
}

/* =========================================
   SEÇÃO: LOGÍSTICA E LOCALIZAÇÃO
========================================= */
.logistics-section {
    padding: 100px 5%;
    background-color: #ffffff;
    overflow: hidden;
}

/* Cabeçalho da Seção */
.logistics-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.badge {
    display: inline-block;
    background-color: #d1fae5;
    /* Verde claro */
    color: #059669;
    /* Verde escuro */
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.logistics-header h2 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 800;
}

.logistics-header p {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Container do Grid (Mapa + Diferenciais) */
.logistics-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50% para cada lado */
    gap: 50px;
}

/* --- COLUNA ESQUERDA: LOCALIZAÇÃO --- */
.location-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
}

.location-card h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 25px;
}

.address-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.address-icon {
    width: 50px;
    height: 50px;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.address-text {
    display: flex;
    flex-direction: column;
}

.address-text strong {
    font-size: 1.1rem;
    color: #1e293b;
}

.address-text span {
    font-size: 0.95rem;
    color: #64748b;
}

/* Wrapper Responsivo para o Iframe do Google Maps */
.map-wrapper {
    position: relative;
    width: 100%;
    /* O padding-bottom cria uma proporção (aspect ratio). 60% deixa retangular. */
    padding-bottom: 60%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- COLUNA DIREITA: DIFERENCIAIS --- */
.column-title {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 30px;
}

.diff-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.diff-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Efeito de barra lateral crescendo no Hover */
.diff-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #10b981;
    /* Verde esmeralda */
    transition: width 0.3s ease;
    opacity: 0;
}

.diff-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

.diff-item:hover::before {
    opacity: 1;
}

.diff-icon {
    font-size: 1.8rem;
    color: #10b981;
    /* Verde */
    margin-top: 2px;
}

.diff-content h4 {
    font-size: 1.15rem;
    color: #1e293b;
    margin-bottom: 8px;
}

.diff-content p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
}

/* =========================================
   ANIMAÇÕES DE ENTRADA (Ocultos inicialmente)
========================================= */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
}

.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   RESPONSIVIDADE
========================================= */
@media (max-width: 992px) {
    .logistics-container {
        grid-template-columns: 1fr;
        /* Fica 1 coluna (Mapa em cima, texto embaixo) */
        gap: 40px;
    }

    .logistics-header h2 {
        font-size: 2rem;
    }

    /* No celular, é melhor que o mapa fique com um formato mais quadrado */
    .map-wrapper {
        padding-bottom: 75%;
    }
}

/* =========================================
   CONTROLES (IDIOMA E TEMA)
========================================= */
.site-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}

.lang-selector {
    display: flex;
    gap: 8px;
    border-right: 2px solid #e2e8f0;
    padding-right: 15px;
}

.lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    transition: color 0.3s;
}

.lang-btn:hover {
    color: #64748b;
}

.lang-btn.active {
    color: #10b981;
}

/* Fica verde quando selecionado */

.theme-toggle {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #1e293b;
    transition: color 0.3s, transform 0.3s;
}

.theme-toggle:hover {
    color: #10b981;
    transform: rotate(15deg);
}

/* =========================================
   MODO ESCURO (DARK MODE)
========================================= */
/* Quando o body ganha a classe dark-mode via JS, ele altera as variáveis e fundos */
body.dark-mode {
    background-color: #0f172a;
    /* Fundo principal escuro (Azul marinho bem escuro) */
    color: #f8fafc;
}

/* Sobrescrevendo o fundo das seções que eram brancas ou cinzas claras */
body.dark-mode .header-top,
body.dark-mode .services-hero,
body.dark-mode .about-section,
body.dark-mode .brands-section,
body.dark-mode .logistics-section {
    background-color: #0f172a;
}

/* Sobrescrevendo os "Cards" para um tom levemente mais claro que o fundo */
body.dark-mode .service-card,
body.dark-mode .diff-item,
body.dark-mode .location-card,
body.dark-mode .brand-card,
body.dark-mode .mission-box {
    background-color: #1e293b;
    border-color: #334155;
}

/* Ajustando textos escuros para ficarem claros */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong,
body.dark-mode .theme-toggle {
    color: #f8fafc;
}

body.dark-mode p,
body.dark-mode span:not(.badge),
body.dark-mode .about-description {
    color: #cbd5e1;
    /* Cinza claro para leitura confortável */
}

/* Ajusta o fundo da logo (caso ela não seja vazada) ou ícones no tema escuro */
body.dark-mode .lang-selector {
    border-color: #334155;
}

/* =========================================
   SEÇÃO: CONTATO
========================================= */
.contact-section {
    padding: 100px 5%;
    background-color: #f8fafc;
    display: flex;
    justify-content: center;
}

/* O cartão unificado que segura as duas partes */
.contact-wrapper {
    display: flex;
    max-width: 1100px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* Corta as bordas dos filhos para ficarem redondas */
}

/* --- PAINEL DE INFORMAÇÕES (ESQUERDA) --- */
.contact-info-panel {
    flex: 1;
    /* Ocupa metade do espaço */
    background: linear-gradient(135deg, #10b981, #3b82f6);
    /* Gradiente da marca */
    color: #ffffff;
    padding: 50px;
    display: flex;
    flex-direction: column;
}

.contact-info-panel h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.contact-info-panel p {
    color: #e2e8f0;
    line-height: 1.6;
    margin-bottom: 40px;
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-grow: 1;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.info-item i {
    font-size: 1.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.info-item div {
    display: flex;
    flex-direction: column;
}

.info-item strong {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.info-item span {
    font-size: 0.95rem;
    color: #e2e8f0;
}

/* Redes Sociais */
.social-links {
    margin-top: 40px;
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.social-links a:hover {
    background-color: #ffffff;
    color: #3b82f6;
    transform: translateY(-3px);
}

/* --- PAINEL DO FORMULÁRIO (DIREITA) --- */
.contact-form-panel {
    flex: 1.2;
    /* Ocupa um pouco mais de espaço que a esquerda */
    padding: 50px;
    background-color: #ffffff;
}

.contact-form-panel h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 30px;
}

/* Estilo do Formulário com Floating Labels */
.modern-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.input-group {
    position: relative;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 15px 15px 15px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background-color: transparent;
    outline: none;
    font-size: 1rem;
    color: #1e293b;
    transition: border-color 0.3s;
}

/* Quando clica no campo */
.input-group input:focus,
.input-group textarea:focus {
    border-color: #3b82f6;
}

/* A Mágica do Label Flutuante */
.input-group label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
    /* O clique passa direto para o input */
    transition: all 0.3s ease;
    background-color: #ffffff;
    padding: 0 5px;
}

.input-group textarea~label {
    top: 25px;
    /* Ajuste inicial para a caixa de texto */
}

/* Quando o input está focado OU quando ele NÃO está vazio (placeholder não mostrado) */
.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label,
.input-group textarea:focus~label,
.input-group textarea:not(:placeholder-shown)~label {
    top: 0;
    font-size: 0.85rem;
    color: #3b82f6;
    font-weight: 600;
}

/* Botão Enviar */
.btn-submit {
    background-color: #10b981;
    /* Verde esmeralda */
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s, transform 0.3s;
    margin-top: 10px;
}

.btn-submit:hover {
    background-color: #059669;
    transform: translateY(-2px);
}

/* =========================================
   AJUSTES PARA O DARK MODE (CONTATO)
========================================= */
body.dark-mode .contact-section {
    background-color: #0f172a;
}

body.dark-mode .contact-wrapper {
    background-color: #1e293b;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .contact-form-panel {
    background-color: #1e293b;
}

body.dark-mode .contact-form-panel h3,
body.dark-mode .input-group input,
body.dark-mode .input-group textarea {
    color: #f8fafc;
}

body.dark-mode .input-group input,
body.dark-mode .input-group textarea {
    border-color: #334155;
}

body.dark-mode .input-group input:focus,
body.dark-mode .input-group textarea:focus {
    border-color: #3b82f6;
}

/* O fundo do label tem que acompanhar a cor do painel no dark mode */
body.dark-mode .input-group label {
    background-color: #1e293b;
}

/* =========================================
   RESPONSIVIDADE (Telas menores)
========================================= */
@media (max-width: 850px) {
    .contact-wrapper {
        flex-direction: column;
        /* Coloca a info em cima e form embaixo */
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 40px 30px;
    }
}

/* =========================================
   SEÇÃO: COBERTURA E ESTATÍSTICAS
========================================= */
.coverage-section {
    padding: 100px 5%;
    background-color: #ffffff;
    /* Fundo branco por padrão */
}

.coverage-container {
    max-width: 1200px;
    margin: 0 auto;
}

.coverage-header {
    text-align: center;
    margin-bottom: 50px;
}

.coverage-header h2 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 800;
}

.coverage-header p {
    color: #64748b;
    font-size: 1.1rem;
}

/* Grid de Cidades */
.cities-grid {
    display: grid;
    /* Auto-fit cria colunas dinâmicas, ótimo para responsividade sem precisar de muito media query */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 80px;
}

/* Estilo Pílula para as cidades */
.city-pill {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    /* Bordas totalmente redondas */
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #334155;
    transition: all 0.3s ease;
    cursor: default;
}

.city-pill i {
    color: #10b981;
    /* Ícone verde */
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

/* Hover interativo */
.city-pill:hover {
    background-color: #10b981;
    /* Fica verde no hover */
    color: #ffffff;
    border-color: #10b981;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}

.city-pill:hover i {
    color: #ffffff;
    /* Ícone fica branco */
}

/* Banner de Estatísticas */
.stats-banner {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    /* Azul muito escuro para dar contraste forte */
    border-radius: 24px;
    padding: 50px 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    /* Permite quebrar linha no mobile */
    gap: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Detalhe visual de luz no fundo do banner */
.stats-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.stat-item {
    text-align: center;
    color: #ffffff;
    z-index: 2;
    /* Fica acima da luz do fundo */
    flex: 1;
    min-width: 150px;
}

.stat-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 5px;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: #10b981;
    /* Verde esmeralda nos números */
    line-height: 1;
}

.stat-suffix {
    font-size: 2rem;
    font-weight: 700;
    color: #10b981;
}

.stat-item p {
    font-size: 1.05rem;
    color: #cbd5e1;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================
   DARK MODE PARA ESTA SEÇÃO
========================================= */
body.dark-mode .coverage-section {
    background-color: #0f172a;
}

body.dark-mode .city-pill {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

/* Banner no Dark mode (deixa um pouco mais azulado para separar do fundo) */
body.dark-mode .stats-banner {
    background: linear-gradient(135deg, #1e293b, #111827);
    border: 1px solid #334155;
}

/* =========================================
   RESPONSIVIDADE
========================================= */
@media (max-width: 768px) {
    .stats-banner {
        padding: 40px 20px;
        gap: 30px;
    }

    /* Força os itens a ocuparem 50% no tablet/mobile (2 colunas) */
    .stat-item {
        flex: 1 1 40%;
    }

    .stat-number {
        font-size: 2.8rem;
    }
}

@media (max-width: 480px) {

    /* No celular bem pequeno, fica 1 coluna */
    .stat-item {
        flex: 1 1 100%;
    }
}

/* =========================================
   CARROSSEL DE BANNERS (ESTILO HERO GIGANTE)
========================================= */
.partner-banners-section {
    width: 100%;
    max-width: 1440px;
    /* Aumentado para preencher monitores maiores */
    margin: 60px auto;
    padding: 0 20px;
    /* Margens laterais menores para o banner brilhar mais */
}

/* =========================================
   TÍTULO DO CARROSSEL (HERO HEADER)
   ========================================= */
.hero-header {
    text-align: center;
    margin-bottom: 40px;
    /* Distância entre o texto e as imagens */
    padding: 0 20px;
}

/* Etiqueta moderna acima do título */
.badge-destaque {
    display: inline-block;
    background-color: rgba(16, 185, 129, 0.1);
    /* Fundo verde com transparência */
    color: #10b981;
    /* Verde esmeralda (pode ajustar para a cor da sua empresa) */
    padding: 6px 16px;
    border-radius: 50px;
    /* Deixa em formato de pílula */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.hero-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: #1e293b;
    /* Cinza bem escuro para melhor leitura de dia */
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.destaque-verde {
    color: #10b981;
}

.hero-header p {
    font-size: 18px;
    color: #64748b;
    max-width: 600px;
    /* Impede que o texto fique muito largo em PCs */
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Ajustes para Celular --- */
@media (max-width: 768px) {
    .hero-header h2 {
        font-size: 32px;
    }

    .hero-header p {
        font-size: 16px;
    }
}

/* =========================================
   SUPORTE AO MODO NOTURNO (Dark Mode)
   ========================================= */
body.dark-mode .hero-header h2 {
    color: #f8fafc;
    /* Branco gelo */
}

body.dark-mode .hero-header p {
    color: #94a3b8;
    /* Cinza claro */
}

body.dark-mode .badge-destaque {
    background-color: rgba(16, 185, 129, 0.2);
    /* Fica um pouco mais visível no escuro */
}

.banner-carousel-container {
    position: relative;
    width: 100%;

    /* 👇 A MÁGICA DO TAMANHO 👇 */
    height: 85vh;
    /* Ocupa 65% da altura da tela do usuário! */
    min-height: 450px;
    /* Garante que não fique espremido em notebooks pequenos */
    max-height: 800px;
    /* Evita que fique um exagero em TVs ou telas ultrawide */

    border-radius: 24px;
    /* Bordas bem mais arredondadas e modernas */
    overflow: hidden;

    /* Sombra 3D imponente: parece que o banner está flutuando */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05);
    background-color: #0f172a;
}


.banner-track {
    display: flex;
    width: 100%;
    height: 100%;
    /* Transição um pouco mais lenta (0.8s) para dar uma sensação de peso e luxo */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.banner-slide {
    min-width: 100%;
    height: 100%;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- SETAS DE CONTROLE (Maior e com mais desfoque) --- */
.banner-ctrl-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.4);
    /* Fundo mais transparente */
    backdrop-filter: blur(12px);
    /* Desfoque muito mais forte (Vidro) */
    -webkit-backdrop-filter: blur(12px);
    color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Borda de luz fina */
    width: 65px;
    /* Setas gigantes */
    height: 65px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.banner-carousel-container:hover .banner-ctrl-btn {
    opacity: 1;
}

.banner-ctrl-btn:hover {
    background-color: rgba(255, 255, 255, 0.95);
    color: #10b981;
    transform: translateY(-50%) scale(1.15);
    /* Pula um pouco mais para a tela */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.banner-ctrl-btn.prev {
    left: 30px;
}

.banner-ctrl-btn.next {
    right: 30px;
}

/* --- BOLINHAS DE PAGINAÇÃO (Estilo Linha/Tracejado) --- */
.banner-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-radius: 30px;
    backdrop-filter: blur(8px);
}

.b-dot {
    width: 15px;
    height: 6px;
    /* Em vez de bolinhas, pequenos traços */
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.b-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.b-dot.active {
    width: 40px;
    /* O traço ativo estica bastante */
    background-color: #10b981;
}

/* =========================================
   RESPONSIVIDADE (Ajuste para Imagem Dallas Vertical)
========================================= */
@media (max-width: 768x) {
    .banner-carousel-container {
        /* Removemos o height: 50vh e min-height */
        height: auto;
        min-height: unset;

        /* A proporção mágica para imagens tipo Stories (1080x1920) é 9/16 */
        aspect-ratio: 9 / 16;

        border-radius: 16px;
        background-color: transparent;
        /* Remove o fundo escuro para não ter bordas pretas */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .banner-slide img {
        width: 100%;
        height: 100%;

        /* Mudamos de cover para contain. 
           Assim, ele garante que a imagem do Dallas vai aparecer 100% inteira na tela, sem cortar o topo ou o rodapé. */
        object-fit: contain;
        object-position: center;
    }

    /* Setas no celular: menores e sempre visíveis */
    .banner-ctrl-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        opacity: 1;
        /* Sempre visível no mobile, já que não tem mouse para dar hover */
    }

    .banner-ctrl-btn.prev {
        left: 10px;
    }

    .banner-ctrl-btn.next {
        right: 10px;
    }

    .banner-dots {
        bottom: 15px;
        /* Sobe as bolinhas um pouco */
        padding: 6px 12px;
    }

    .b-dot {
        width: 10px;
        height: 5px;
    }

    .b-dot.active {
        width: 25px;
    }
}

/* =========================================
   CONTROLE DE VISIBILIDADE (DESKTOP VS MOBILE)
========================================= */

/* Por padrão (telas grandes), o banner mobile fica oculto */
.mobile-banner {
    display: none;
}

/* Quando a tela for menor que 768px (Celulares) */
@media (max-width: 768px) {

    /* Esconde o banner de PC */
    .desktop-banner {
        display: none !important;
        /* Força a ocultação */
    }

    /* Mostra o banner de Celular */
    .mobile-banner {
        display: block !important;
        /* Força a exibição */
    }
}

/* =========================================
   FOOTER COMPACTO
========================================= */
.compact-footer {
    background-color: #1e293b;
    /* Azul escuro elegante */
    color: #cbd5e1;
    /* Texto cinza claro para contraste suave */
    padding: 50px 5% 20px 5%;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ========================================================
   ESTRUTURA PRINCIPAL DO RODAPÉ
======================================================== */
.footer-top {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Linha mais delicada */
    padding-bottom: 40px;
}

/* -----------------------------------------
   COLUNA 1: MARCA E REDES SOCIAIS
----------------------------------------- */
.footer-brand {
    flex: 2;
    min-width: 280px;
}

.footer-logo {
    max-height: 45px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.02);
}

.footer-brand p {
    color: #94a3b8; /* Cor mais suave para leitura em fundo escuro */
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 380px;
}

/* Redes Sociais do Rodapé */
.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    width: 40px; /* Um pouco maior para melhor clique */
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.footer-socials a:hover {
    background-color: #10b981;
    border-color: #10b981;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); /* Brilho verde */
}

/* -----------------------------------------
   COLUNAS 2 E 3: LINKS E CONTATOS
----------------------------------------- */
.footer-links,
.footer-contact {
    flex: 1;
    min-width: 240px;
}

.compact-footer h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.compact-footer ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduzido para encaixar o formato de botão */
}

/* -----------------------------------------
   A MÁGICA: ITENS DE CONTATO INTERATIVOS
----------------------------------------- */
.footer-contact ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px; /* Transforma o item em um bloco clicável */
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 0.95rem;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: pointer;
}

/* O ícone dentro do contato */
.footer-contact ul li i {
    color: #10b981;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.footer-contact ul li a,
.footer-contact ul li span {
    color: inherit;
    text-decoration: none;
}

/* Efeito Hover (Fundo translúcido elegante) */
.footer-contact ul li:hover {
    background: rgba(255, 255, 255, 0.05); /* Fundo "Glass" */
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(6px); /* Desliza pra direita */
    color: #ffffff;
}

.footer-contact ul li:hover i {
    transform: scale(1.15); /* Ícone pulsa levemente */
}

.footer-contact ul li:active {
    transform: translateX(6px) scale(0.98);
    background: rgba(255, 255, 255, 0.02);
}

/* -----------------------------------------
   COLUNA DE LINKS ÚTEIS (Efeito de Seta)
----------------------------------------- */
.footer-links ul li a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 8px 0;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.footer-links ul li a::before {
    position: absolute;
    left: -15px;
    opacity: 0;
    color: #10b981;
    transition: all 0.3s ease;
}

.footer-links ul li a:hover {
    color: #10b981;
    transform: translateX(15px); /* Desliza o texto abrindo espaço */
}

.footer-links ul li a:hover::before {
    opacity: 1; /* A setinha aparece */
    left: 0;
}

/* -----------------------------------------
   LINHA INFERIOR (DIREITOS E LEGAL)
----------------------------------------- */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748b;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-legal a:hover {
    color: #ffffff;
}

/* ========================================================
   RESPONSIVIDADE: CELULARES E TABLETS
======================================================== */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 35px;
    }
    
    .footer-brand {
        text-align: center;
    }
    
    .footer-brand p {
        margin: 0 auto 20px auto;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================================
   BOTÃO FLUTUANTE DO WHATSAPP
========================================= */
.whatsapp-float {
    position: fixed;
    /* Fixa o botão na tela */
    bottom: 30px;
    /* Distância da parte de baixo */
    left: 30px;
    /* Distância da esquerda (como você pediu) */
    width: 60px;
    height: 60px;
    background-color: #25d366;
    /* Cor oficial do WhatsApp */
    color: #ffffff;
    border-radius: 50%;
    /* Deixa perfeitamente redondo */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    /* Tamanho do ícone */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    /* Sombra para destacar */
    z-index: 9999;
    /* Garante que fique acima de todos os outros elementos */
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Ativa a animação de pulsar criada abaixo */
    animation: pulse-whatsapp 2s infinite;
}

/* Efeito ao passar o mouse por cima */
.whatsapp-float:hover {
    transform: scale(1.1);
    /* Cresce um pouquinho */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

/* Animação que cria as "ondas" ao redor do botão para chamar atenção */
@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

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

/* =========================================
   RESPONSIVIDADE (Celulares)
========================================= */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
        /* Mantém na esquerda no celular */
        font-size: 30px;
    }
}

/* CTA DOWNLOAD CATÁLOGO */

/* Estilo para centralizar o cabeçalho das seções */
.section-header-central {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-header-central h2 {
    font-size: 2.5rem;
    color: var(--color-dark);
    margin-bottom: 15px;
    font-weight: 800;
}

/* A linha verde embaixo do título */
.title-underline {
    width: 60px;
    height: 4px;
    background-color: #10b981;
    /* O verde da sua marca */
    border-radius: 2px;
}

/* Ajuste para o Dark Mode */
body.dark-mode .section-header-central h2 {
    color: #ffffff;
}

.cta-catalog-section {
    background: linear-gradient(135deg, #10b981, #059669);
    /* Fundo verde vibrante */
    padding: 60px 5%;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.cta-content {
    flex: 2;
    color: #ffffff;
}

.cta-content h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.cta-action {
    flex: 1;
    text-align: right;
    min-width: 250px;
}

.btn-download {
    display: inline-block;
    background-color: #ffffff;
    color: #059669;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-download:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
    }

    .cta-action {
        text-align: center;
        width: 100%;
    }
}

/* Dark Mode: Ajuste suave */
body.dark-mode .cta-catalog-section {
    background: linear-gradient(135deg, #065f46, #047857);
}

/* =========================================
   SEÇÃO DE DEPOIMENTOS (TESTIMONIALS)
========================================= */
.testimonials-section {
    background-color: white;
    overflow: hidden;
    /* Evita que qualquer elemento vaze para os lados na tela inteira */
}

.testimonial-carousel-window {
    width: 100%;
    overflow: hidden;
    /* Esconde os cards que estão fora da tela */
    padding: 20px 0;
}

.testimonial-track {
    display: flex;
    gap: 30px;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    /* Movimento elegante */
    width: 100%;
}

.testi-card {
    /* Cálculo exato: 100% da tela, menos 60px dos dois gaps, dividido por 3 cards */
    flex: 0 0 calc((100% - 60px) / 3);
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
    box-sizing: border-box;
    /* Impede que o padding aumente o tamanho do card e quebre o layout */
}

.stars {
    color: #f1c40f;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.testi-card p {
    font-style: italic;
    color: #475569;
    margin-bottom: 20px;
    min-height: 80px;
}

.testi-card strong {
    color: #1e293b;
    font-size: 0.95rem;
    display: block;
    /* Garante que não quebre o layout se o nome for grande */
}

/* Responsivo para Celular e Tablet */
@media (max-width: 992px) {
    .testimonial-track {
        gap: 20px;
        /* Reduz o espaço entre os cards no celular */
    }

    .testi-card {
        flex: 0 0 100%;
        /* Exibe 1 card por vez no celular, ocupando a tela toda */
        padding: 25px;
        /* Reduz um pouco o espaçamento interno para telas menores */
    }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background: #10b981;
    width: 30px;
    border-radius: 10px;
}

/* =========================================
   MODO NOTURNO - SEÇÃO DE DEPOIMENTOS
========================================= */

/* Fundo da seção geral */
body.dark-mode .testimonials-section {
    background-color: #0f172a;
    /* Fundo azul muito escuro */
}

/* Título principal da seção */
body.dark-mode .section-header-central h2 {
    color: #f8fafc;
    /* Branco gelo para leitura suave */
}

/* Ajuste da linha abaixo do título */
body.dark-mode .section-header-central .title-underline {
    background-color: #10b981;
    /* Mantém o verde esmeralda de destaque */
}

/* =========================================
   CARTÕES DE DEPOIMENTOS (Cards)
========================================= */
body.dark-mode .testi-card {
    background-color: #1e293b;
    /* Fundo do card um tom mais claro que o fundo geral */
    border: 1px solid #334155;
    /* Borda sutil para separar o card do fundo */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    /* Sombra mais escura e forte para modo noturno */
}

/* Texto do depoimento */
body.dark-mode .testi-card p {
    color: #cbd5e1;
    /* Cinza claro, não cansa a vista */
}

/* Nome e Empresa do autor */
body.dark-mode .testi-card strong {
    color: #f1f5f9;
    /* Quase branco, dando mais destaque ao autor */
}

/* Estrelas de avaliação */
body.dark-mode .testi-card .stars {
    color: #fbbf24;
    /* Amarelo/Dourado vivo */
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
    /* Efeito de brilho suave nas estrelas */
}

/* =========================================
   BOLINHAS DE NAVEGAÇÃO (Dots)
========================================= */
/* Bolinhas inativas */
body.dark-mode .carousel-dots .dot {
    background-color: #475569;
    /* Cinza médio para não sumirem no fundo escuro */
}

/* Efeito ao passar o mouse nas inativas */
body.dark-mode .carousel-dots .dot:hover {
    background-color: #94a3b8;
}

/* Bolinha ativa */
body.dark-mode .carousel-dots .dot.active {
    background-color: #10b981;
    /* Cor de destaque (verde) para mostrar onde o usuário está */
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    /* Brilho em volta da bolinha ativa */
}

/* ========================================================
   BOTÃO VOLTAR AO TOPO (DO ZERO)
======================================================== */
.btn-voltar-topo {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Travado na direita */
    width: 48px;
    height: 48px;
    background-color: #10b981; /* Verde da Mäber */
    color: #ffffff;
    border: none;
    border-radius: 12px; /* Levemente arredondado, estilo Apple */
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 999999; /* Valor extremo para nada cobrir ele */

    /* Alinha a setinha exatamente no meio */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Começa invisível e sem poder ser clicado */
    opacity: 0;
    pointer-events: none; 
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Classe que o JavaScript vai usar para mostrar o botão */
.btn-voltar-topo.ativo {
    opacity: 1;
    pointer-events: auto; /* Libera o clique */
    transform: translateY(0);
}

/* Efeito ao passar o mouse */
.btn-voltar-topo:hover {
    background-color: #059669;
    transform: translateY(-5px); /* Dá um pulinho pra cima */
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* Modo Noturno */
body.dark-mode .btn-voltar-topo {
    background-color: #334155;
    color: #f8fafc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
body.dark-mode .btn-voltar-topo:hover {
    background-color: #475569;
}

/* Celular: Fica um pouco menor e mais perto da borda */
@media (max-width: 600px) {
    .btn-voltar-topo {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* =========================================
   SEÇÃO DE PRODUTOS (DESIGN PREMIUM)
========================================= */
.premium-products-section {
    padding: 100px 0;
    background-color: var(--color-light, #f8fafc);
}

.premium-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium-header h2 {
    font-size: 2.8rem;
    color: var(--color-dark, #1e293b);
    font-weight: 800;
    margin-bottom: 15px;
}

.premium-header p {
    font-size: 1.1rem;
    color: var(--color-gray, #64748b);
    max-width: 700px;
    line-height: 1.7;
}

/* Grid Inteligente Responsiva */
.modern-cards-grid {
    display: grid;
    /* Adapta automaticamente para 1, 2 ou 3 colunas dependendo do espaço */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* O Cartão Moderno */
.modern-product-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 35px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alinhado à esquerda */
    text-align: left;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}

.modern-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* Ícones Translúcidos (Efeito Glow) */
.card-icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.modern-product-card:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
    /* Dá uma leve viradinha animada */
}

/* Cores específicas para cada cartão */
.blue-glow {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.orange-glow {
    background-color: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.green-glow {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.modern-product-card h3 {
    font-size: 1.4rem;
    color: var(--color-dark, #1e293b);
    margin-bottom: 15px;
    font-weight: 700;
}

.modern-product-card p {
    font-size: 0.95rem;
    color: var(--color-gray, #64748b);
    margin-bottom: 30px;
    line-height: 1.6;
    flex-grow: 1;
    /* Faz o link ir para o fundo automaticamente */
}

/* Link Inferior com Seta Animada */
.modern-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    margin-top: auto;
}

.modern-card-link i {
    transition: transform 0.3s ease;
}

.modern-product-card:hover .modern-card-link i {
    transform: translateX(6px);
    /* Seta vai para a direita no hover */
}

/* Cores dos Textos dos Links */
.blue-text {
    color: #3b82f6;
}

.orange-text {
    color: #f97316;
}

.green-text {
    color: #10b981;
}

/* Destaque Opcional no Cartão do Meio */
.card-featured {
    border: 2px solid transparent;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #f97316, #10b981);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* =========================================
   DARK MODE - PRODUTOS PREMIUM
========================================= */
body.dark-mode .premium-products-section {
    background-color: #0f172a;
}

body.dark-mode .premium-header h2 {
    color: #f8fafc;
}

body.dark-mode .premium-header p {
    color: #cbd5e1;
}

body.dark-mode .modern-product-card {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .modern-product-card h3 {
    color: #f8fafc;
}

body.dark-mode .modern-product-card p {
    color: #94a3b8;
}

body.dark-mode .modern-product-card:hover {
    border-color: #475569;
}

/* Card Destacado no Dark Mode */
body.dark-mode .card-featured {
    background-image: linear-gradient(#1e293b, #1e293b), linear-gradient(135deg, #f97316, #10b981);
}

/* =========================================
   RESPONSIVIDADE PRODUTOS
========================================= */
@media (max-width: 768px) {
    .premium-header h2 {
        font-size: 2.2rem;
    }

    .modern-product-card {
        padding: 30px 25px;
    }
}

/* =========================================
   SEÇÃO: DIFERENCIAIS (POR QUE ESCOLHER)
========================================= */
.premium-features-section {
    padding: 80px 0;
    /* Usa fundo branco para dar contraste com a seção de produtos que é cinza clara */
    background-color: #ffffff;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    /* Mantém centralizado como no seu design original */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

/* Ícones Redondos com Efeito Glow */
.feature-icon-wrapper {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    /* Perfeitamente redondo */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon-wrapper {
    transform: scale(1.1);
    /* Ícone cresce levemente ao passar o mouse */
}

/* Cores específicas de cada ícone (incluindo o Roxo novo) */
.green-glow {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.blue-glow {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.purple-glow {
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.feature-card h3 {
    font-size: 1.35rem;
    color: var(--color-dark, #1e293b);
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--color-gray, #64748b);
    line-height: 1.6;
}

/* =========================================
   DARK MODE - DIFERENCIAIS
========================================= */
body.dark-mode .premium-features-section {
    background-color: #111827;
}

body.dark-mode .feature-card {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode .feature-card h3 {
    color: #f8fafc;
}

body.dark-mode .feature-card p {
    color: #94a3b8;
}

body.dark-mode .feature-card:hover {
    border-color: #475569;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* =========================================
   RESPONSIVIDADE (Celulares)
========================================= */
@media (max-width: 768px) {
    .premium-features-section {
        padding: 60px 0;
    }

    .feature-card {
        padding: 30px 20px;
    }
}

/* CENTRAL DE DOWNLOADS - ESTILO CLEAN */
.downloads-section {
    padding: 40px 0;
    background-color: #f8fafc;
    /* Fundo cinza bem clarinho */
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.download-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.d-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Cores dos ícones */
.d-icon.green {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.d-icon.blue {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.d-icon.purple {
    background-color: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.d-text {
    flex-grow: 1;
}

.d-text h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #1e293b;
    font-weight: 700;
}

.d-text p {
    margin: 2px 0 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.d-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: #475569;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s;
}

.d-btn:hover {
    background-color: #10b981;
    color: #ffffff;
}

/* Dark Mode */
body.dark-mode .downloads-section {
    background-color: #0f172a;
}

body.dark-mode .download-card {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode .d-text h4 {
    color: #f8fafc;
}

body.dark-mode .d-text p {
    color: #94a3b8;
}

body.dark-mode .d-btn {
    background-color: #334155;
    color: #cbd5e1;
}

/* ========================================== */
/* VARIÁVEIS DE CORES (CLARO / ESCURO)        */
/* ========================================== */
:root {
    --mb-fundo-secao: #F8FAFC;
    --mb-fundo-texto: #FFFFFF;
    /* Fundo exclusivo para a área do texto */
    --mb-borda: #E2E8F0;
    --mb-borda-hover: #CBD5E1;
    --mb-texto-titulo: #0F172A;
    --mb-texto-sub: #64748B;
    --mb-sombra: rgba(0, 0, 0, 0.05);
}

/* Quando o botão de Dark Mode for ativado no Body */
body.dark-mode {
    --mb-fundo-secao: #0F172A;
    --mb-fundo-texto: #1E293B;
    /* A área de texto fica azul escura no modo noturno */
    --mb-borda: #334155;
    --mb-borda-hover: #475569;
    --mb-texto-titulo: #F8FAFC;
    --mb-texto-sub: #94A3B8;
    --mb-sombra: rgba(0, 0, 0, 0.3);
}

/* ========================================== */
/* VARIÁVEIS GERAIS (CLARO / ESCURO)          */
/* ========================================== */
:root {
    /* Cores do Cabeçalho */
    --hdr-cor-principal: #1D2A3B;
    --hdr-cor-destaque: #14C38E;
    --hdr-cor-subtitulo: #64748B;
    --hdr-linha-decorativa: #E2E8F0;

    /* Cores da Seção e dos Cards */
    --mb-fundo-secao: #F8FAFC;
    /* Fundo cinza bem claro para o card branco destacar */
    --mb-fundo-texto: #FFFFFF;
    /* Fundo exclusivo para a área de texto do card */
    --mb-borda: #E2E8F0;
    --mb-borda-hover: #CBD5E1;
    --mb-texto-titulo: #0F172A;
    --mb-texto-sub: #64748B;
    --mb-sombra: rgba(0, 0, 0, 0.05);
}

/* 🌙 MODO NOTURNO (Ativado no body) */
body.dark-mode {
    /* Cores do Cabeçalho Escuro */
    --hdr-cor-principal: #F8FAFC;
    --hdr-cor-destaque: #14C38E;
    --hdr-cor-subtitulo: #94A3B8;
    --hdr-linha-decorativa: #334155;

    /* Cores da Seção e dos Cards Escuros */
    --mb-fundo-secao: #0F172A;
    --mb-fundo-texto: #1E293B;
    --mb-borda: #334155;
    --mb-borda-hover: #475569;
    --mb-texto-titulo: #F8FAFC;
    --mb-texto-sub: #94A3B8;
    --mb-sombra: rgba(0, 0, 0, 0.3);
}

/* ========================================== */
/* ESTILIZAÇÃO DO CABEÇALHO CENTRAL           */
/* ========================================== */

.section-header-central {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.section-header-central h1 {
    font-size: clamp(32px, 5vw, 48px);
    color: var(--hdr-cor-principal);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    transition: color 0.4s ease;
}

.section-header-central .text-gradient {
    color: var(--hdr-cor-destaque);
    background: none;
    -webkit-text-fill-color: initial;
    background-clip: border-box;
}

.section-header-central .title-underline {
    width: 80px;
    height: 4px;
    background-color: var(--hdr-linha-decorativa);
    margin: 0 auto 25px auto;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.section-header-central .title-underline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--hdr-cor-destaque), transparent);
    animation: linhaCorrendo 3s infinite linear;
}

@keyframes linhaCorrendo {
    0% {
        left: -100%;
    }

    50% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.section-header-central .subtitle {
    font-size: 18px;
    color: var(--hdr-cor-subtitulo);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    transition: color 0.4s ease;
}

@media (max-width: 768px) {
    .section-header-central {
        margin-bottom: 40px;
    }

    .section-header-central .subtitle {
        font-size: 16px;
    }
}

/* ========================================== */
/* SEÇÃO DE MARCAS E CARDS SPLIT              */
/* ========================================== */

.maber-marcas-clean-section {
    padding: 80px 20px;
    /* Aqui estava #ffffff fixo, agora usa a variável que muda de cor! */
    background-color: var(--mb-fundo-secao);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: background-color 0.4s ease;
}

.maber-container {
    max-width: 1200px;
    margin: 0 auto;
}

.maber-marcas-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.maber-marcas-header h2 {
    font-size: 32px;
    color: var(--mb-texto-titulo);
    font-weight: 700;
    transition: color 0.4s ease;
}

.maber-marcas-clean-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
}

.maber-card-limpo {
    background-color: transparent;
    border: 1px solid var(--mb-borda);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    min-height: 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.4s ease;
}

.maber-card-limpo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--mb-sombra);
    border-color: var(--mb-borda-hover);
}

.maber-marca-img-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background-color: #FFFFFF;
    /* Garante fundo branco para as logos coloridas */
    border-bottom: 1px solid var(--mb-borda);
    transition: border-color 0.4s ease;
}

.maber-card-limpo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.maber-card-limpo:hover img {
    transform: scale(1.05);
}

.maber-marca-texto {
    text-align: center;
    width: 100%;
    padding: 15px 20px;
    background-color: var(--mb-fundo-texto);
    transition: background-color 0.4s ease;
}

.maber-marca-texto h4 {
    font-size: 18px;
    color: var(--mb-texto-titulo);
    margin: 0 0 5px 0;
    font-weight: 700;
    transition: color 0.4s ease;
}

.maber-marca-texto span {
    font-size: 14px;
    color: var(--mb-texto-sub);
    font-weight: 400;
    transition: color 0.4s ease;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    .maber-marcas-clean-section {
        padding: 40px 15px;
    }

    .maber-marcas-header {
        margin-bottom: 30px;
    }

    .maber-marcas-header h2 {
        font-size: 26px;
    }

    .maber-marcas-clean-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .maber-card-limpo {
        min-height: 180px;
    }

    .maber-marca-img-wrapper {
        padding: 20px 15px;
    }

    .maber-card-limpo img {
        max-height: 60px;
    }

    .maber-marca-texto {
        padding: 12px 10px;
    }

    .maber-marca-texto h4 {
        font-size: 16px;
    }

    .maber-marca-texto span {
        font-size: 12px;
    }
}

/* Estilização Como Comprar */
.how-to-buy {
    padding: 80px 0;
    background-color: #f8fbf5;
    /* Um fundo bem leve puxado para o verde */
    transition: background 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.badge {
    background: #2ecc71;
    /* Verde da Mäber */
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Cor do título principal na seção */
.section-header h2 {
    color: #1a2b4c;
    /* Azul Marinho da Mäber */
    margin-top: 15px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.buy-step-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 10px 30px rgba(26, 43, 76, 0.05);
    /* Sombra azulada leve */
    text-align: center;
    transition: transform 0.3s ease, background 0.3s ease;
    border-bottom: 4px solid #1a2b4c;
    /* Borda inferior no azul marinho */
}

.buy-step-card h3 {
    color: #1a2b4c;
    /* Título do card em azul marinho */
}

.buy-step-card:hover {
    transform: translateY(-10px);
    border-color: #2ecc71;
    /* Borda muda para verde no hover */
}

.step-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(26, 43, 76, 0.08);
    /* Número em azul marinho transparente */
}

.step-icon {
    font-size: 3rem;
    color: #2ecc71;
    /* Ícones em verde */
    margin-bottom: 20px;
}

/* Call to Action Final */
.buy-cta {
    background: linear-gradient(135deg, #1a2b4c, #0d1626);
    /* Degradê azul marinho */
    padding: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    flex-wrap: wrap;
    gap: 20px;
}

.cta-btns {
    display: flex;
    gap: 15px;
}

.btn-primary {
    background: #2ecc71;
    /* Botão principal verde */
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: filter 0.3s;
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-outline {
    border: 2px solid #fff;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- MODO NOTURNO (DARK MODE) --- */
body.dark-mode .how-to-buy {
    background-color: #0f172a;
}

body.dark-mode .buy-step-card {
    background: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .buy-step-card h3 {
    color: #fff;
}

body.dark-mode .buy-step-card p {
    color: #cbd5e1;
}

body.dark-mode .step-number {
    color: white
}

/* Responsividade */
@media (max-width: 768px) {
    .buy-cta {
        text-align: center;
        justify-content: center;
    }
}

/* --- Carrossel de Galeria Mäber --- */
.company-gallery {
    padding: 80px 0;
    background: #fff;
    overflow: hidden;
}

.text-green {
    color: #2ecc71;
}

.gallery-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.gallery-carousel {
    position: relative;
    height: 500px;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(26, 43, 76, 0.15);
}

.gallery-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease;
    transform: scale(1.05);
}

.gallery-item.active {
    opacity: 1;
    transform: scale(1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(26, 43, 76, 0.7);
    /* Azul Marinho com transparência */
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 15px;
    color: white;
    border-left: 5px solid #2ecc71;
}

.gallery-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.gallery-controls button {
    background: #1a2b4c;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.gallery-controls button:hover {
    background: #2ecc71;
    transform: scale(1.1);
}

.gallery-dots {
    display: flex;
    gap: 10px;
}

.dot-item {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
}

.dot-item.active {
    background: #2ecc71;
    width: 30px;
    border-radius: 10px;
}

/* Modo Noturno */
body.dark-mode .company-gallery {
    background: #0f172a;
}

/* ========================================================
   SEÇÃO CONQUISTAS COMPACTA (achievements-compact)
   ======================================================== */

.achievements-compact {
    /* Fundo azul marinho da logo */
    background: linear-gradient(rgba(26, 43, 76, 0.95), rgba(26, 43, 76, 0.95)),
        url('https://images.unsplash.com/photo-1577416416479-7a0e36b8e391?q=80&w=1200&auto=format&fit=crop');
    background-attachment: fixed;
    background-size: cover;
    /* Preenchimento bem menor para ser compacto */
    padding: 50px 0;
    color: white;
    text-align: center;
    border-top: 5px solid #2ecc71;
    /* Borda verde sutil no topo */
    margin-bottom: 60px;
    /* Isso cria o espaço entre a seção e o footer */
}

.achievements-grid {
    display: grid;
    /* Grade apertada, cartões menores */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1000px;
    /* Grade mais estreita */
    margin: 0 auto;
}

/* Estilo do Cartão Compacto */
.achievement-card {
    background: rgba(255, 255, 255, 0.03);
    /* Fundo quase invisível */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse */
.achievement-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

/* Ícone Compacto */
.card-icon {
    font-size: 1.8rem;
    /* Verde da marca */
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    /* Fundo verde transparente */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Estilo para o ícone de prêmio (central) */
.award-icon {
    border: 2px solid #2ecc71;
}

.card-data h2 {
    font-size: 2.2rem;
    /* Número menor */
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.card-data p {
    font-size: 0.9rem;
    /* Texto menor */
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Destacar o cartão central (Tradição) */
.active-achievement {
    border: 1px solid rgba(46, 204, 113, 0.4);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.1);
}

/* Responsividade para celulares */
@media (max-width: 768px) {
    .achievements-compact {
        padding: 30px 0;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
    }
}

/* --- Seção de Serviços Mäber --- */
.services-section {
    padding: 100px 0;
    background-color: #fdfdfd;
}

.services-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.service-box {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(26, 43, 76, 0.05);
    text-align: center;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(26, 43, 76, 0.03);
}

.service-box:hover {
    transform: translateY(-12px);
    border-color: #2ecc71;
    box-shadow: 0 20px 40px rgba(46, 204, 113, 0.15);
}

.service-icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(26, 43, 76, 0.05);
    color: #1a2b4c;
    /* Azul Marinho */
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 25px;
    transition: 0.3s ease;
}

.service-box:hover .service-icon-wrapper {
    background: #2ecc71;
    /* Muda para verde no hover */
    color: white;
    transform: rotateY(360deg);
    /* Pequeno giro charmoso */
}

.service-box h3 {
    color: #1a2b4c;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.service-box p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Modo Noturno --- */
body.dark-mode .services-section {
    background-color: #0f172a;
}

body.dark-mode .service-box {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .service-box h3 {
    color: white;
}

body.dark-mode .service-box p {
    color: #94a3b8;
}

body.dark-mode .service-icon-wrapper {
    background: rgba(255, 255, 255, 0.05);
    color: #2ecc71;
}

/* --- Seção FAQ Layout Split --- */
.faq-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* Lado direito maior */
    gap: 60px;
    align-items: flex-start;
}

.faq-info {
    position: sticky;
    top: 100px;
    /* Faz esse lado ficar fixo ao rolar a tela no PC */
}

.faq-desc {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Card de Contato do Suporte */
.support-contact-card {
    background: #f8fbf5;
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 10px 25px rgba(26, 43, 76, 0.05);
}

.support-icon {
    background: #2ecc71;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.support-text h4 {
    color: #1a2b4c;
    margin-bottom: 5px;
    font-weight: 700;
}

.support-text p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1a2b4c;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #2ecc71;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.faq-btn:hover {
    color: #2ecc71;
}

/* --- Estilo do Accordion Moderno --- */
.faq-modern-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
    /* Linha mágica */
}

.faq-modern-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* Estado Ativo (Quando Aberto) */
.faq-modern-item.active {
    border-color: #e2e8f0;
    border-left-color: #2ecc71;
    /* Fica verde do lado esquerdo */
    box-shadow: 0 10px 30px rgba(26, 43, 76, 0.08);
}

/* Botão da Pergunta */
.faq-modern-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 25px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4c;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: color 0.3s;
}

.faq-modern-item.active .faq-modern-question {
    color: #2ecc71;
}

/* Animação do Ícone de + para x */
.icon-toggle {
    color: #2ecc71;
    transition: transform 0.4s ease;
}

.faq-modern-item.active .icon-toggle {
    transform: rotate(135deg);
    /* Gira transformando o + em x */
}

/* O Segredo da Animação CSS Grid */
.faq-modern-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.faq-modern-item.active .faq-modern-answer {
    grid-template-rows: 1fr;
}

.answer-inner {
    overflow: hidden;
    /* Necessário para a animação grid funcionar */
}

.answer-inner p {
    padding: 0 30px 25px 30px;
    color: #64748b;
    line-height: 1.7;
}

/* --- Modo Noturno --- */
body.dark-mode .faq-section {
    background-color: #0f172a;
}

body.dark-mode .faq-desc,
body.dark-mode .support-text p {
    color: #94a3b8;
}

body.dark-mode .support-contact-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .support-text h4 {
    color: white;
}

body.dark-mode .faq-btn {
    color: white;
}

body.dark-mode .faq-btn:hover {
    color: #2ecc71;
}

body.dark-mode .faq-modern-item {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .faq-modern-question {
    color: #f1f5f9;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .faq-layout {
        grid-template-columns: 1fr;
        /* Coloca um em cima do outro no celular */
        gap: 40px;
    }

    .faq-info {
        position: relative;
        top: 0;
    }
}


/* --- MABER GRID HELP --- */
.maber-grid-help {
    padding: 100px 0;
    background: #f8fafc;
}

body.dark-mode .maber-grid-help {
    background: #0f172a;
}

.help-header-modern {
    text-align: center;
    margin-bottom: 60px;
}

.top-tag {
    background: #10b981;
    color: #fff;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.help-header-modern h2 {
    font-size: 42px;
    color: #1e293b;
    margin: 15px 0;
}

body.dark-mode .help-header-modern h2 {
    color: #fff;
}

.help-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.help-card-box {
    background: #ffffff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
}

body.dark-mode .help-card-box {
    background: #1e293b;
    border-color: #334155;
}

.help-card-icon {
    font-size: 35px;
    color: #10b981;
    margin-bottom: 25px;
    transition: 0.3s;
}

.help-card-box h3 {
    font-size: 22px;
    color: #1e293b;
    margin-bottom: 15px;
}

body.dark-mode .help-card-box h3 {
    color: #fff;
}

.help-card-box p {
    color: #64748b;
    line-height: 1.6;
    transition: 0.3s;
}

/* EFEITO REVELAÇÃO (HIDDEN INFO) */
.help-card-hidden-info {
    max-height: 0;
    opacity: 0;
    transition: all 0.5s ease;
    margin-top: 0;
    border-top: 1px solid transparent;
}

.help-card-hidden-info ul {
    list-style: none;
    padding: 15px 0 0 0;
}

.help-card-hidden-info li {
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.help-card-hidden-info li::before {
    content: '✓';
    margin-right: 10px;
}

/* HOVER ANIMATION */
.help-card-box:hover {
    transform: translateY(-10px);
    border-color: #10b981;
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.1);
}

.help-card-box:hover .help-card-hidden-info {
    max-height: 150px;
    opacity: 1;
    margin-top: 20px;
    border-top: 1px solid #e2e8f0;
}

body.dark-mode .help-card-box:hover {
    border-color: #10b981;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .help-header-modern h2 {
        font-size: 30px;
    }

    .help-card-box {
        padding: 30px;
    }
}

/* --- Seção de Catálogos Text-Based --- */
.catalogs-section {
    padding: 100px 0;
    /* Fundo limpo */
}

.catalog-text-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* O Novo Card Sem Foto */
.catalog-text-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(26, 43, 76, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(26, 43, 76, 0.05);
}

.catalog-text-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.3);
}

/* Faixa superior de destaque */
.card-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #1a2b4c, #2ecc71);
}

/* Cabeçalho do Card (Ícone + Versão) */
.cat-icon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(26, 43, 76, 0.05);
    color: #1a2b4c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.catalog-text-card:hover .icon-circle {
    background: #2ecc71;
    color: white;
    transform: scale(1.1);
}

.cat-version {
    background: #f1f5f9;
    color: #64748b;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Corpo do Card */
.cat-body h3 {
    color: #1a2b4c;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.cat-body p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Lista de Detalhes (O que deixa "rico") */
.cat-details {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    border-top: 1px dashed #e2e8f0;
    padding-top: 20px;
    flex-grow: 1;
}

.cat-details li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.cat-details li i {
    color: #2ecc71;
    width: 15px;
}

/* Botões do Rodapé */
.cat-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-download-flat,
.btn-digital-flat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-download-flat {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.btn-download-flat:hover {
    background: #2ecc71;
    color: white;
}

.btn-digital-flat {
    background: #f1f5f9;
    color: #1a2b4c;
}

.btn-digital-flat:hover {
    background: #1a2b4c;
    color: white;
}

/* --- NOVO: Banner B2B --- */
.b2b-partnership-banner {
    background: #1a2b4c;
    border-radius: 20px;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: white;
    box-shadow: 0 15px 30px rgba(26, 43, 76, 0.2);
    position: relative;
    overflow: hidden;
}

/* --- Banner de Assessoria de Compras --- */
.custom-assistance-banner {
    background: #ffffff;
    /* Fundo branco para contrastar com o cinza/verde da seção */
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 15px 35px rgba(26, 43, 76, 0.08);
    position: relative;
    overflow: hidden;
    border-left: 8px solid #2ecc71;
    /* Borda lateral grossa verde */
}

/* Ícone grande e elegante */
.assistance-icon-wrapper {
    background: rgba(26, 43, 76, 0.05);
    color: #1a2b4c;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    flex-shrink: 0;
}

.assistance-badge {
    color: #2ecc71;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.assistance-content {
    flex-grow: 1;
}

.assistance-content h3 {
    color: #1a2b4c;
    font-size: 1.6rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.assistance-content p {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
}

/* Botão de Ação (WhatsApp) */
.assistance-btn {
    background: #1a2b4c;
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(26, 43, 76, 0.2);
}

.assistance-btn:hover {
    background: #2ecc71;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.3);
}

/* --- Modo Noturno --- */
body.dark-mode .custom-assistance-banner {
    background: #1e293b;
    border-color: #2ecc71;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .assistance-icon-wrapper {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

body.dark-mode .assistance-content h3 {
    color: white;
}

body.dark-mode .assistance-content p {
    color: #cbd5e1;
}

body.dark-mode .assistance-btn {
    background: #334155;
}

body.dark-mode .assistance-btn:hover {
    background: #2ecc71;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .custom-assistance-banner {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
        border-left: none;
        border-top: 8px solid #2ecc71;
        /* A borda vai para cima no celular */
    }
}

/* --- Modo Noturno --- */
body.dark-mode .catalog-text-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .cat-body h3 {
    color: white;
}

body.dark-mode .cat-body p,
body.dark-mode .cat-details li {
    color: #94a3b8;
}

body.dark-mode .cat-version {
    background: #0f172a;
    color: #cbd5e1;
}

body.dark-mode .icon-circle {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

body.dark-mode .btn-digital-flat {
    background: #334155;
    color: white;
}

body.dark-mode .btn-digital-flat:hover {
    background: #475569;
}

body.dark-mode .cat-details {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .b2b-partnership-banner {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
}

@media (max-width: 400px) {
    .cat-footer {
        grid-template-columns: 1fr;
    }
}

/* --- Seção de Contato Diferenciada --- */
.contact-section {
    padding: 100px 0;
    background-color: #fdfdfd;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    align-items: stretch;
}

/* Lado Esquerdo: Cards de Informação */
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid rgba(26, 43, 76, 0.05);
    box-shadow: 0 10px 30px rgba(26, 43, 76, 0.03);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-card:hover {
    transform: translateX(10px);
    /* O card desliza um pouco para a direita ao passar o mouse */
    border-color: #2ecc71;
    box-shadow: 0 15px 35px rgba(46, 204, 113, 0.1);
}

.info-icon {
    width: 60px;
    height: 60px;
    background: rgba(26, 43, 76, 0.05);
    color: #1a2b4c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    transition: all 0.3s;
}

.info-card:hover .info-icon {
    background: #2ecc71;
    color: white;
}

/* Destaque especial para o WhatsApp */
.whatsapp-card:hover .info-icon {
    background: #25D366;
}

.info-text h4 {
    color: #1a2b4c;
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 800;
}

.info-text p {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.action-link {
    color: #2ecc71;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    /* Escondido por padrão */
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.info-card:hover .action-link {
    opacity: 1;
    /* Aparece magicamente no hover */
    transform: translateX(0);
}

/* Lado Direito: Formulário Inteligente */
.contact-form-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(26, 43, 76, 0.08);
    border: 1px solid rgba(26, 43, 76, 0.03);
}

.modern-contact-form h3 {
    color: #1a2b4c;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 30px;
}

/* Pílulas de Departamento */
.department-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.department-pills input[type="radio"] {
    display: none;
    /* Esconde o botão redondo feio padrão */
}

.department-pills label {
    padding: 10px 20px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
}

/* Efeito quando selecionado */
.department-pills input[type="radio"]:checked+label {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border-color: #2ecc71;
}

/* Campos do Formulário com Floating Labels */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 25px;
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 18px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    color: #1a2b4c;
    font-family: inherit;
    transition: all 0.3s;
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* A mágica do Hover/Focus */
.form-group input:focus,
.form-group textarea:focus {
    background: #ffffff;
    border-color: #2ecc71;
    box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.1);
}

/* A etiqueta que flutua */
.floating-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
}

.form-group textarea~.floating-label {
    top: 20px;
    transform: none;
}

/* O que faz a etiqueta subir quando clica ou tem texto */
.form-group input:focus~.floating-label,
.form-group input:not(:placeholder-shown)~.floating-label,
.form-group textarea:focus~.floating-label,
.form-group textarea:not(:placeholder-shown)~.floating-label {
    top: -10px;
    left: 15px;
    font-size: 0.8rem;
    color: #2ecc71;
    background: #ffffff;
    padding: 0 5px;
    font-weight: 700;
}

/* Botão de Enviar */
.submit-btn {
    width: 100%;
    background: #1a2b4c;
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: #2ecc71;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.2);
}

/* Mensagem de Sucesso */
.success-message {
    margin-top: 20px;
    padding: 15px;
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- Modo Noturno --- */
body.dark-mode .contact-section {
    background-color: #0b1120;
}

body.dark-mode .contact-form-wrapper,
body.dark-mode .info-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .info-icon {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

body.dark-mode .info-text h4,
body.dark-mode .modern-contact-form h3 {
    color: white;
}

body.dark-mode .info-text p,
body.dark-mode .form-group label {
    color: #94a3b8;
}

body.dark-mode .department-pills label {
    background: #0f172a;
    color: #cbd5e1;
}

body.dark-mode .department-pills input[type="radio"]:checked+label {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    background: #1e293b;
    border-color: #2ecc71;
}

body.dark-mode .form-group input:focus~.floating-label,
body.dark-mode .form-group input:not(:placeholder-shown)~.floating-label,
body.dark-mode .form-group textarea:focus~.floating-label,
body.dark-mode .form-group textarea:not(:placeholder-shown)~.floating-label {
    background: #1e293b;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    /* Sobe em vez de ir pro lado no celular */
}


/* =========================================
   REMAKE TOTAL: PÁGINA PARCERIAS (ULTRA PREMIUM)
========================================= */

.trabalhe-conosco-section {
    padding: 100px 20px;
    background-color: transparent;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Container Principal Grid */
.work-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    /* O form fica um pouquinho mais largo */
    gap: 80px;
    align-items: center;
    /* Centraliza verticalmente o lado esquerdo com o direito */
}

/* =========================================
   PASSO A PASSO (ALINHAMENTO BLINDADO + PREMIUM)
========================================= */

.work-steps h3 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 45px;
    letter-spacing: -1px;
}

/* 1. O Item Principal (Usando Grid para alinhamento perfeito) */
.step-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    /* Coluna 1 cravada em 56px, Coluna 2 livre */
    gap: 25px;
    /* Espaço exato entre o número e o texto */
    position: relative;
    padding-bottom: 45px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.step-item:last-child {
    padding-bottom: 0;
    /* Tira a margem do último item */
}

/* Pulo suave para a direita ao passar o mouse na linha */
.step-item:hover {
    transform: translateX(8px);
}

/* 2. O Número (Design Squircle Premium) */
.step-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 900;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efeito 3D no número ao passar o mouse */
.step-item:hover .step-number {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 25px -5px rgba(16, 185, 129, 0.6);
}

/* 3. A Linha Conectora (Matematicamente Centralizada) */
.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 66px;
    /* Começa 10px abaixo da caixa do número */
    left: 27px;
    /* Metade de 56px (28) menos a largura da linha (1) = 27px */
    bottom: 10px;
    /* Termina antes de encostar no próximo número */
    width: 2px;
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5) 0%, rgba(226, 232, 240, 0) 100%);
    z-index: 1;
    border-radius: 2px;
}

/* 4. O Texto */
.step-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5px;
    /* Desce o texto para centralizar com o número */
}

.step-text h4 {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 8px;
    margin-top: 0;
    font-weight: 800;
    transition: color 0.3s ease;
}

/* O título acende verde ao passar o mouse no passo */
.step-item:hover .step-text h4 {
    color: #10b981;
}

.step-text p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   ANIMAÇÃO DE ENTRADA (FADE IN LEFT)
========================================= */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    /* Garante que comece invisível */
}

/* =========================================
   MODO NOTURNO
========================================= */
body.dark-mode .work-steps h3,
body.dark-mode .step-text h4 {
    color: #f8fafc;
}

body.dark-mode .step-text p {
    color: #94a3b8;
}

body.dark-mode .step-item:not(:last-child)::after {
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5) 0%, rgba(30, 41, 59, 0) 100%);
}

/* =========================================
   LADO DIREITO: FORMULÁRIO FLUTUANTE
========================================= */
.work-form-container {
    background-color: #ffffff;
    padding: 50px 40px;
    border-radius: 24px;
    /* Bordas bem redondas */
    /* Sombra gigante, mas super difusa (efeito flutuante real) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 10;
}

.work-form-container h3 {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 35px;
    text-align: center;
}

/* --- Floating Labels Restilizado --- */
.form-floating {
    position: relative;
    margin-bottom: 24px;
}

.form-floating input,
.form-floating select,
.form-floating textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 26px 20px 10px;
    background-color: #f8fafc;
    border: 2px solid transparent;
    /* Sem borda inicial */
    border-radius: 14px;
    font-size: 16px;
    color: #1e293b;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-floating label {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #94a3b8;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    font-weight: 500;
}

/* Ação de Foco */
.form-floating input:focus,
.form-floating textarea:focus,
.form-floating select:focus {
    background-color: #ffffff;
    border-color: #10b981;
    /* Brilho verde ao redor do campo */
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    outline: none;
}

/* O texto sobe suavemente */
.form-floating input:focus~label,
.form-floating input:not(:placeholder-shown)~label,
.form-floating textarea:focus~label,
.form-floating textarea:not(:placeholder-shown)~label,
.form-floating select:valid~label {
    top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.form-floating textarea {
    resize: none;
    /* Bloqueia o redimensionamento feio */
}

/* Botão de Envio Gradient */
.btn-submit-premium {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
}

.btn-submit-premium:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(16, 185, 129, 0.5);
}

.btn-submit-premium i {
    transition: transform 0.3s ease;
}

.btn-submit-premium:hover:not(:disabled) i {
    transform: translateX(4px) translateY(-4px);
    /* O aviãozinho voa pra frente */
}

/* =========================================
   TELA DE SUCESSO
========================================= */
.success-message-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100%;
}

.success-icon i {
    font-size: 80px;
    background: -webkit-linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 25px;
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-message-box h3 {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
}

.success-message-box p {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 40px;
    line-height: 1.7;
}

.btn-outline {
    background: transparent;
    color: #10b981;
    border: 2px solid #10b981;
    box-shadow: none;
}

.btn-outline:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    box-shadow: none;
}

/* Animações Keyframes */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes popIn {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

/* =========================================
   RESPONSIVIDADE (Tablets e Celulares)
========================================= */
@media (max-width: 960px) {
    .work-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .work-form-container {
        padding: 40px 25px;
    }
}

/* =========================================
   MODO NOTURNO (DARK MODE ULTRA LUXO)
========================================= */
body.dark-mode .work-steps h3,
body.dark-mode .step-text h4,
body.dark-mode .work-form-container h3,
body.dark-mode .success-message-box h3 {
    color: #f8fafc;
}

body.dark-mode .step-text p,
body.dark-mode .success-message-box p {
    color: #94a3b8;
}

body.dark-mode .step-item:not(:last-child)::after {
    background: linear-gradient(to bottom, #10b981 0%, #1e293b 100%);
}

/* Formulário Dark */
body.dark-mode .work-form-container {
    background-color: #1e293b;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.dark-mode .form-floating input,
body.dark-mode .form-floating select,
body.dark-mode .form-floating textarea {
    background-color: #0f172a;
    color: #f8fafc;
}

body.dark-mode .form-floating label {
    color: #64748b;
}

body.dark-mode .form-floating input:focus,
body.dark-mode .form-floating select:focus,
body.dark-mode .form-floating textarea:focus {
    background-color: #0f172a;
    /* Mantém escuro ao focar */
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* ========================================================
   PÁGINA SOBRE NÓS / NOSSA HISTÓRIA
======================================================== */
.sobre-page-main {
    padding-bottom: 80px;
}

/* --- Hero Section --- */
.sobre-hero-section {
    text-align: center;
    padding: 100px 20px 60px;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

body.dark-mode .sobre-hero-section {
    background: linear-gradient(to bottom, #0f172a, #1e293b);
}

.sobre-title {
    font-size: 48px;
    font-weight: 800;
    color: #1e293b;
    margin: 20px 0;
}

body.dark-mode .sobre-title {
    color: #f8fafc;
}

.sobre-subtitle {
    font-size: 18px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Linha do Tempo (Timeline) --- */
.timeline-section {
    padding: 60px 20px;
}

.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* A linha central vertical */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #10b981;
    /* Verde Maber */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 4px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

/* Itens da esquerda e direita */
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

/* A bolinha da linha do tempo */
.timeline-dot {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 4px solid #10b981;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: -10px;
    z-index: 1;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -10px;
}

/* O conteúdo do marco */
.timeline-content {
    padding: 24px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

body.dark-mode .timeline-content {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.timeline-year {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.timeline-content h3 {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 10px;
}

.timeline-content p {
    color: #64748b;
    line-height: 1.5;
}

body.dark-mode .timeline-content h3 {
    color: #f8fafc;
}

body.dark-mode .timeline-content p {
    color: #cbd5e1;
}

/* --- Carrossel de Fotos --- */
.sobre-gallery-section {
    padding: 60px 20px;
    overflow: hidden;
}

.history-carousel-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 40px auto 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.history-carousel-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.history-slide {
    min-width: 100%;
    height: 500px;
}

.history-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.7);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}

.history-btn:hover {
    background: #10b981;
    transform: translateY(-50%) scale(1.1);
}

.history-btn.prev {
    left: 20px;
}

.history-btn.next {
    right: 20px;
}

/* --- Missão, Visão e Valores (MVV) --- */
.mvv-section {
    padding: 60px 20px;
}

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
}

.mvv-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

body.dark-mode .mvv-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mvv-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.mvv-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #1e293b;
}

.mvv-card p {
    color: #64748b;
    line-height: 1.6;
}

body.dark-mode .mvv-card h3 {
    color: #f8fafc;
}

body.dark-mode .mvv-card p {
    color: #cbd5e1;
}

/* ========================================================
   RESPONSIVIDADE (Celulares e Tablets)
======================================================== */
@media (max-width: 768px) {
    .sobre-title {
        font-size: 32px;
    }

    /* Reposiciona a linha do tempo para o canto esquerdo no mobile */
    .timeline-container::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 0;
        text-align: left !important;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-dot {
        left: 21px !important;
        right: auto !important;
    }

    .history-slide {
        height: 300px;
    }

    .mvv-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   SEÇÃO DE EXCELÊNCIA TECNOLÓGICA (DASHBOARD)
======================================================== */

.tech-excellence-section {
    padding: 80px 20px;
    background-color: #f8fafc;
    /* Fundo cinza super claro para destacar o painel */
    overflow: hidden;
}

body.dark-mode .tech-excellence-section {
    background-color: #0f172a;
    /* Fundo escuro Maber */
}

.tech-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Divide meio a meio no PC */
    gap: 60px;
    align-items: center;
}

/* =========================================
   LADO ESQUERDO: O PAINEL DIGITAL (MOCKUP)
========================================= */
.tech-visual-wrapper {
    position: relative;
    z-index: 1;
}

/* O "Vidro" do Sistema */
.digital-dashboard {
    background-color: #1e293b;
    /* Fundo azul escuro estilo terminal/painel */
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #334155;
    overflow: hidden;
    transform: perspective(1000px) rotateY(5deg) rotateX(2deg);
    /* Dá um leve efeito 3D premium */
    transition: transform 0.5s ease;
}

.digital-dashboard:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
}

/* Cabeçalho do Painel (Bolinhas estilo Mac) */
.dashboard-header {
    background-color: #0f172a;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #334155;
}

.header-controls {
    display: flex;
    gap: 8px;
}

.header-controls span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.header-controls span:nth-child(1) {
    background-color: #ef4444;
}

/* Vermelho */
.header-controls span:nth-child(2) {
    background-color: #f59e0b;
}

/* Amarelo */
.header-controls span:nth-child(3) {
    background-color: #10b981;
}

/* Verde */

.header-status {
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: blink 2s infinite;
    /* Bolinha piscando */
}

/* Conteúdo interno do Painel */
.dashboard-content {
    padding: 30px 20px;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.data-card {
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Barra de Progresso Animada */
.progress-container {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 10px;
    animation: loadBar 3s infinite ease-in-out;
}

/* =========================================
   LADO DIREITO: TEXTOS E RECURSOS
========================================= */
.tech-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tech-label {
    align-self: flex-start;
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.tech-main-title {
    font-size: 42px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.2;
}

body.dark-mode .tech-main-title {
    color: #f8fafc;
}

.text-green {
    color: #10b981;
}

.tech-description {
    font-size: 18px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
}

body.dark-mode .tech-description {
    color: #94a3b8;
}

/* Lista de Funcionalidades */
.tech-features-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tech-feat {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.tech-feat i {
    font-size: 20px;
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.15);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.tech-feat strong {
    display: block;
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 4px;
}

body.dark-mode .tech-feat strong {
    color: #f1f5f9;
}

.tech-feat span {
    font-size: 15px;
    color: #64748b;
    line-height: 1.4;
}

body.dark-mode .tech-feat span {
    color: #94a3b8;
}

/* =========================================
   ANIMAÇÕES (KEYFRAMES)
========================================= */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@keyframes loadBar {
    0% {
        width: 0%;
    }

    50% {
        width: 80%;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

.pulse {
    animation: pulseBg 2s infinite alternate;
}

@keyframes pulseBg {
    from {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.2);
    }

    to {
        background: rgba(16, 185, 129, 0.3);
        border-color: rgba(16, 185, 129, 0.5);
    }
}

/* =========================================
   RESPONSIVIDADE (CELULARES E TABLETS)
========================================= */
@media (max-width: 991px) {
    .tech-container {
        grid-template-columns: 1fr;
        /* Passa a empilhar um em cima do outro */
        gap: 40px;
    }

    .tech-visual-wrapper {
        order: 2;
        /* Joga a imagem para baixo no celular */
    }

    .tech-text-content {
        order: 1;
        /* Mantém o texto no topo no celular */
    }

    .tech-main-title {
        font-size: 32px;
    }

    .digital-dashboard {
        transform: none;
        /* Tira o 3D no celular para evitar quebra de layout */
    }
}

/* =========================================
   BOTÃO DELICADO (LINK FÁBRICA)
========================================= */
.btn-delicado-fabrica {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    /* Dá um respiro entre o texto e o botão */
    padding: 6px 14px;
    font-size: 13px;
    /* Fonte pequena para manter a delicadeza */
    font-weight: 600;
    color: #10b981;
    /* Verde Maber */
    background-color: rgba(16, 185, 129, 0.05);
    /* Fundo quase transparente */
    border: 1px solid rgba(16, 185, 129, 0.2);
    /* Borda bem fina e sutil */
    border-radius: 50px;
    /* Formato arredondado (pílula) */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Ajuste do tamanho do ícone */
.btn-delicado-fabrica i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

/* Efeito Hover (Ao passar o mouse) */
.btn-delicado-fabrica:hover {
    background-color: #10b981;
    color: #ffffff;
    border-color: #10b981;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
    /* Brilho suave */
}

/* Animação do ícone no Hover (Pula para cima e direita) */
.btn-delicado-fabrica:hover i {
    transform: translate(2px, -2px);
}

/* =========================================
   SUPORTE AO MODO NOTURNO
========================================= */
body.dark-mode .btn-delicado-fabrica {
    color: #34d399;
    /* Tom de verde levemente mais claro para leitura no escuro */
    border-color: rgba(52, 211, 153, 0.3);
}

body.dark-mode .btn-delicado-fabrica:hover {
    background-color: #10b981;
    color: #ffffff;
}

/* ========================================================
   O SEGREDO: AVISO EXCLUSIVO PARA MOBILE
======================================================== */
.mobile-experience-warning {
    display: none;
    /* Escondido por padrão (no PC) */
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #1e293b;
    color: white;
    padding: 20px;
    border-radius: 16px;
    z-index: 9999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--primary);
    animation: slideUpWarning 0.5s ease forwards;
}

.warning-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
}

.warning-content i.fa-desktop {
    font-size: 24px;
    color: var(--primary);
    margin-top: 5px;
}

.warning-content strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.warning-content p {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

.close-warning {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
}

@media (max-width: 768px) {

    /* Mostra o aviso flutuante apenas em telas de celular */
    .mobile-experience-warning {
        display: block;
    }
}



.welcome-card {
    position: fixed;
    /* No Desktop: Ajustado de 80px para 45px para ficar logo abaixo da barra de câmbio */
    top: 45px;
    right: 30px;
    z-index: 10050;
    display: flex;
    align-items: center;
    min-width: 280px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    /* Animação vindo de cima */
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}

.welcome-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.welcome-content {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.welcome-icon {
    font-size: 24px;
    background: rgba(16, 185, 129, 0.1);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.welcome-text {
    display: flex;
    flex-direction: column;
}

.welcome-text small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #10b981;
    font-weight: 700;
    margin-bottom: 2px;
}

.welcome-text strong {
    font-size: 15px;
    color: #1e293b;
    font-weight: 700;
}

/* Efeito de brilho passando (Shimmer) */
.welcome-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.05), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* MODO NOTURNO */
body.dark-mode .welcome-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .welcome-text strong {
    color: #f8fafc;
}

/* COMPORTAMENTO MOBILE (NOTIFICAÇÃO ESTILO 'PILL') */
@media (max-width: 768px) {
    .welcome-card {
        /* Posicionamento discreto no canto superior direito */
        top: 65px !important; /* Fica logo abaixo do seu Header */
        right: 15px !important;
        left: auto !important;
        
        /* Layout super compacto e elegante */
        min-width: auto;
        width: auto;
        max-width: 85%; /* Evita vazar da tela em celulares muito pequenos */
        padding: 6px 14px 6px 6px; /* Padding menor, espaço para o ícone */
        border-radius: 50px; /* Formato de pílula redonda */
        
        /* Muda a animação para deslizar de fora da tela (direita para esquerda) */
        transform: translateX(120%) scale(0.9) !important;
    }
    
    .welcome-card.active {
        transform: translateX(0) scale(1) !important;
    }

    /* Reduz o espaçamento entre o emoji e o texto */
    .welcome-content {
        gap: 10px;
    }

    /* Transforma o fundo do emoji em uma bolinha perfeita e menor */
    .welcome-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
        border-radius: 50%;
    }

    /* Esconde o "Portal do Parceiro" no celular para limpar o visual */
    .welcome-text small {
        display: none; 
    }

    /* Deixa o texto principal mais delicado */
    .welcome-text strong {
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }
}

.maber-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    /* Z-INDEX MAIOR: 10020 para ficar acima da cotação (10010) */
    z-index: 10020;
    padding: 6px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Animação */
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.maber-status-bar.active {
    transform: translateY(0);
    opacity: 1;
}

.maber-status-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 20px;
}

.maber-status-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.maber-status-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.maber-status-text {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.maber-status-time {
    color: #10b981;
    margin-left: 5px;
}

.maber-status-close {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.maber-status-close:hover {
    color: #ef4444;
}

/* MODO NOTURNO */
body.dark-mode .maber-status-bar {
    background: #1e293b;
    border-bottom: 1px solid #334155;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .maber-status-text {
    color: #f8fafc;
}

/* RESPONSIVO CELULAR */
@media (max-width: 600px) {
    .maber-status-label {
        display: none;
    }

    /* Deixa apenas o ícone e o horário no celular */
    .maber-status-text {
        font-size: 13px;
    }
}

.quote-bar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 10010;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.quote-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    /* Aumentado para dar mais espaço ao letreiro */
    margin: 0 auto;
    padding: 0 20px;
    gap: 30px;
}

/* Área do Letreiro */
.quote-ticker-area {
    flex: 1;
    /* Faz as notícias ocuparem todo o meio */
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.ticker-wrap {
    width: 100%;
    white-space: nowrap;
}

.ticker-move {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-animation 50s linear infinite;
}

.news-item {
    display: inline-block;
    padding: 0 30px;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.news-item::before {
    content: "•";
    color: #10b981;
    margin-right: 10px;
}

@keyframes ticker-animation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Pausar ao passar o mouse */
.quote-ticker-area:hover .ticker-move {
    animation-play-state: paused;
}

/* Manter estilos anteriores */
.quote-main {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.quote-label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.quote-values {
    display: flex;
    align-items: center;
    gap: 15px;
}

.val-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.curr {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 600;
}

.value {
    color: #10b981;
    font-weight: 700;
}

.val-separator {
    width: 1px;
    height: 10px;
    background: #e2e8f0;
}

.quote-status-simple {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    flex-shrink: 0;
}

.status-dot {
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

body.dark-mode .quote-bar-fixed {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
}

body.dark-mode .news-item {
    color: #94a3b8;
}

/* Responsivo */
@media (max-width: 900px) {
    .quote-ticker-area {
        display: none;
    }

    /* Esconde notícias em telas pequenas para não bugar o câmbio */
}

.weather-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.08);
    /* Verde Mäber bem clarinho */
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

.weather-icon i {
    color: #10b981;
    font-size: 16px;
}

.weather-info {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

#weather-temp {
    font-weight: 800;
    font-size: 13px;
    color: black;
}

#weather-city {
    font-size: 9px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
}

/* Modo Noturno */
body.dark-mode .weather-widget {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #weather-temp {
    color: white
}

body.dark-mode #weather-city {
    color: #94a3b8;
}

@media (max-width: 600px) {
    .weather-widget {
        padding: 5px 8px;
    }

    .hide-on-mobile {
        display: none;
    }
}

/* ==========================================================================
   1. CAMPO DE SELEÇÃO (MENOS POLUÍDO E COM MAIS RESPIRO)
   ========================================================================== */
.form-floating select {
    width: 100%;
    height: 62px;
    /* Mais alto para caber a label e o texto confortavelmente */
    padding: 26px 16px 8px !important;
    /* Empurra o texto selecionado para baixo */
    font-size: 15px;
    font-weight: 500;
    color: #1e293b;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    /* Borda cinza suave padrão */
    border-radius: 10px;
    /* Bordas mais modernas, menos arredondadas */

    appearance: none;
    -webkit-appearance: none;

    /* Seta fina premium */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;

    transition: all 0.3s ease;
    cursor: pointer;
}

/* Suaviza a Label (Tira o verde gritante e o CapsLock se houver) */
.form-floating select~label {
    color: #64748b !important;
    text-transform: none !important;
    font-weight: 500;
}

/* Verde aparece apenas quando o usuário clica/foca no campo */
.form-floating select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.form-floating select:focus~label {
    color: #10b981 !important;
}

/* ==========================================================================
   2. CAIXA DE INFORMAÇÃO (AGORA PARECE UM CARD DE VERDADE)
   ========================================================================== */
.dept-description {
    display: flex;
    align-items: flex-start;
    /* Alinha o ícone no topo caso o texto tenha 2 linhas */
    gap: 12px;

    background: #f8fafc;
    /* Fundo cinza bem clarinho e chique */
    border: 1px solid #e2e8f0;
    /* Borda completa em volta de tudo */
    border-left: 4px solid #10b981;
    /* Borda grossa apenas na esquerda */
    border-radius: 8px;
    /* Arredondamento que combina com o campo de cima */

    margin-top: 8px;
    /* Dá um leve respiro, sem ficar grudado */
    margin-bottom: 24px;

    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);

    /* Estado inicial (escondido) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    max-height: 0;
    padding: 0 16px;
    border-width: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Estado Ativo (visível) */
.dept-description.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 100px;
    /* Espaço suficiente para o texto abrir */
    padding: 14px 16px;
    /* Padding generoso */
    border-width: 1px;
    border-left-width: 4px;
}

/* Ícone alinhado perfeitamente */
.dept-description::before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
    font-weight: 900;
    color: #10b981;
    font-size: 16px;
    margin-top: 1px;
    /* Alinha visualmente com a primeira linha do texto */
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
body.dark-mode .form-floating select {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

body.dark-mode .form-floating select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

body.dark-mode .dept-description {
    background: #1e293b;
    border-color: #334155;
    border-left-color: #10b981;
    color: #cbd5e1;
}

/* ========================================================
   MODAL DE E-MAIL RÁPIDO
======================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Escondido por padrão */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: #ffffff;
    width: 90%;
    max-width: 420px;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal-overlay.active .modal-box {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #ef4444;
}

.modal-step {
    display: none;
    text-align: center;
}

.modal-step.active {
    display: block;
    animation: fadeInModal 0.4s ease;
}

.modal-icon {
    font-size: 40px;
    color: #10b981;
    margin-bottom: 15px;
}

.success-color {
    color: #10b981;
}

.modal-box h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 8px;
}

.modal-box p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Botões */
.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-modal {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: #10b981;
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #059669;
}

.btn-outline {
    background: transparent;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}

.btn-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-text {
    background: none;
    border: none;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
}

/* Formulário */
.form-group-modal {
    margin-bottom: 12px;
    text-align: left;
}

.form-group-modal input,
.form-group-modal textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #f8fafc;
}

.form-group-modal input:focus,
.form-group-modal textarea:focus {
    border-color: #10b981;
    background: #fff;
}

.modal-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.modal-form-actions .btn-primary {
    width: auto;
    padding: 10px 24px;
}

/* Dark Mode */
body.dark-mode .modal-box {
    background: #1e293b;
}

body.dark-mode .modal-box h3 {
    color: #f8fafc;
}

body.dark-mode .form-group-modal input,
body.dark-mode .form-group-modal textarea {
    background: #0f172a;
    border-color: #334155;
    color: white;
}

/* Estado normal do botão no Dark Mode */
body.dark-mode .btn-outline {
    color: #f8fafc;
    border-color: #334155;
}

/* O segredo está aqui: Efeito ao passar o mouse no Dark Mode */
body.dark-mode .btn-outline:hover {
    background-color: #334155;
    /* Fundo cinza-azulado escuro e elegante */
    border-color: #475569;
    /* Borda levemente mais clara */
    color: #ffffff;
    /* Garante que o texto continue branco e legível */
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ========================================================
   WIDGET WHATSAPP MÚLTIPLO
======================================================== */
.whatsapp-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100000;
}

/* O Botão Verde Redondo */
.whatsapp-container {
    position: fixed;
    bottom: 30px;
    left: 30px; /* Mudou de right para left */
    z-index: 100000;
}

/* O Botão Verde Redondo */
.whatsapp-float-btn {
    width: 60px; height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    box-shadow: 0px 4px 15px rgba(37, 211, 102, 0.4);
    cursor: pointer; border: none; outline: none;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    z-index: 2;
}

.whatsapp-float-btn:hover {
    background-color: #128C7E;
    transform: scale(1.05) translateY(-5px);
}

/* O Menu Flutuante */
.whatsapp-menu {
    position: absolute;
    bottom: 80px; 
    left: 0; /* Mudou de right para left */
    width: 320px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    
    /* Animação Inicial (Escondido) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transform-origin: bottom left; /* Mudou a origem da animação para a esquerda */
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

.whatsapp-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Cabeçalho do Menu */
.wa-header {
    background: #075E54;
    color: #fff;
    padding: 12px 15px; /* Reduzido de 20px */
    display: flex;
    align-items: center;
    gap: 12px; /* Reduzido de 15px */
    position: relative;
}

.wa-header i.fa-whatsapp {
    font-size: 28px; /* Reduzido de 36px */
}

.wa-header-text h4 {
    margin: 0;
    font-size: 14px; /* Reduzido de 16px */
    font-weight: 700;
    color: #fff;
}

.wa-header-text p {
    margin: 2px 0 0;
    font-size: 11px; /* Reduzido de 12px */
    opacity: 0.9;
    line-height: 1.2;
}

.wa-close {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px; /* Reduzido de 16px */
    opacity: 0.6;
    cursor: pointer;
    transition: 0.2s;
}

.wa-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Corpo e Itens */
.wa-body {
    padding: 10px; /* Reduzido de 12px */
    max-height: 320px; /* Reduzido para ficar mais compacto na tela */
    overflow-y: auto;
    background-color: #EFE7DD;
}

.wa-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduzido de 12px */
    padding: 10px; /* Reduzido de 12px */
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: #1e293b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.wa-item:last-child {
    margin-bottom: 0;
}

.wa-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.wa-avatar {
    width: 36px; /* Reduzido de 42px */
    height: 36px; /* Reduzido de 42px */
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px; /* Reduzido de 18px */
    flex-shrink: 0;
}

.wa-info strong {
    display: block;
    font-size: 13px; /* Reduzido de 14px */
    font-weight: 700;
    margin-bottom: 2px;
}

.wa-info span {
    display: block;
    font-size: 11px; /* Reduzido de 11.5px */
    color: #64748b;
    line-height: 1.2;
}

/* ========================================================
   MODO NOTURNO (DARK MODE)
======================================================== */
body.dark-mode .whatsapp-menu {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .wa-header {
    background: #1f2c34;
    /* WPP Dark Mode */
}

body.dark-mode .wa-body {
    background-color: #0b141a;
}

body.dark-mode .wa-item {
    background: #1e2b33;
    color: #e9edef;
}

body.dark-mode .wa-item:hover {
    background: #2a3942;
}

body.dark-mode .wa-info span {
    color: #8696a0;
}

/* Ajuste no Mobile para a Esquerda */
@media (max-width: 600px) {
    .whatsapp-menu { width: 290px; left: 0; bottom: 75px; } /* right virou left */
    .whatsapp-container { bottom: 20px; left: 20px; } /* right virou left */
}