:root {
            --bs-primary: #0033a0;  /* Azul Epson */
            --bs-primary-rgb: 0, 51, 160;
            --bs-secondary: #f8f9fa;/* Cinza claro para fundos */
            --dsi-accent: #e0008e;   /* Rosa/Magenta DSI */
            --dsi-cyan: #00aef0;    /* Ciano DSI */
        }

        /* 2. Tipografia (Conforme solicitado) */
        body {
            font-family: 'Encode Sans', sans-serif;
            font-weight: 400;
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6,
        .display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
        .navbar-brand, .nav-link, .btn {
            font-family: 'Rubik', sans-serif;
            font-weight: 600;
        }

        .subtitulo {
            font-family: 'Encode Sans', sans-serif;
            font-weight: 500;
            color: #555;
        }

        /* 3. Estilo Moderno (Bootstrap Overrides) */
        
        /* Botão Primário usa a cor da Epson */
        .btn-primary {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 10px rgba(0, 51, 160, 0.3);
        }
        
        /* Botão Outline usa a cor de destaque Rosa no hover */
        .btn-outline-primary {
            color: var(--bs-primary);
            border-color: var(--bs-primary);
            transition: all 0.3s ease;
        }
        .btn-outline-primary:hover {
            color: #fff;
            background-color: var(--dsi-accent); /* Destaque Rosa */
            border-color: var(--dsi-accent);
            transform: translateY(-3px);
            box-shadow: 0 4px 10px rgba(224, 0, 142, 0.3);
        }

        .text-accent {
            color: var(--dsi-accent);
        }
        .text-cyan {
            color: var(--dsi-cyan);
        }

        /* 4. Barra de Navegação */
        .navbar {
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }
        .navbar-brand .bi-printer-fill {
            color: var(--dsi-cyan); /* Ícone com Ciano */
        }
        .navbar-brand .dsi-text {
            color: var(--bs-primary); /* Texto DSI em Azul */
        }

        .nav-link {
            transition: color 0.2s ease;
        }
        .nav-link:hover,
        .nav-link.active {
            color: var(--dsi-accent) !important; /* Destaque Rosa no hover */
        }

        /* 5. Estrutura de Seções */
        section {
            padding: 80px 0;
            overflow-x: hidden; /* Previne scroll horizontal por causa do AOS */
        }
        
        /* Adicionado espaçamento no Hero para não colar no header */
        .hero {
            padding: 100px 0 80px 0; 
        }

        section:nth-child(even) {
            background-color: var(--bs-secondary);
        }

        /* 6. Componentes */
        .card {
            border: 0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px); /* Efeito de "levantar" */
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .card-icon {
            font-size: 2.5rem;
            color: var(--bs-primary); /* Cor do ícone padronizada */
        }

        .list-group-item-action {
            display: flex;
            align-items: center;
            border-radius: 8px !important;
            margin-bottom: 10px;
            transition: background-color 0.2s ease;
        }
        .list-group-item-action:hover {
            background-color: #f0f0f0;
        }
        
        .list-group-item-action i {
            font-size: 1.5rem;
            margin-right: 15px;
            color: var(--bs-primary); /* Cor do ícone padronizada */
        }

        /* 7. Abas (Programas) com Destaque Rosa */
        .nav-tabs {
            border-bottom: 1px solid #dee2e6;
        }
        .nav-tabs .nav-link {
            font-size: 1.1rem;
            color: #555;
            border: 0;
            border-bottom: 3px solid transparent;
        }
        .nav-tabs .nav-link.active {
            font-weight: 700;
            color: var(--dsi-accent); /* Destaque Rosa */
            border-bottom: 3px solid var(--dsi-accent);
        }
        .tab-pane {
            padding-top: 2rem;
        }
        
        /* 8. Rodapé */
        .footer {
            background-color: #00339f;
            color: #ccc;
            padding: 60px 0;
        }
        .footer h5 {
            font-family: 'Rubik', sans-serif;
            color: #fff;
            margin-bottom: 20px;
        }
        .footer-links {
            list-style: none;
            padding-left: 0;
        }
        .footer-links li {
            margin-bottom: 10px;
        }
        .footer-links a {
            color: #ccc;
            text-decoration: none;
            font-family: 'Encode Sans', sans-serif;
            transition: color 0.2s;
        }
        .footer-links a:hover {
            color: var(--dsi-accent); /* Destaque Rosa */
            text-decoration: underline;
        }
        
        /* 9. Modal de Políticas */
        .modal-body {
            max-height: 70vh;
            overflow-y: auto;
        }

        .logo-site {
            width: 220px;
        }

        .rounded-custom {
            border-radius: 8rem;
        }
        :root {
        --icon-color: #fff;
        --icon-hover: #fff;
        --background-color: #00c800;
        --background-hover: #009600
    }

    .icon {
        width: 48px;
        height: 48px;
        transform: scale(0.6) translate(20%, 20%);
        fill: var(--icon-color);
	pointer-events: none;
    }

    .float {
        position: fixed;
        cursor: pointer;
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        transition: 1s;
        background-color: var(--background-color);
        border-radius: 50px;
        animation: pulse 3s infinite;
        -webkit-animation: pulse 3s infinite;
        -moz-animation: pulse 3s infinite;
        -o-animation: pulse 3s infinite;
        z-index: 99999
    }

    .float:hover {
        background-color: var(--background-hover)
    }

    .float:hover .icon {
        fill: var(--icon-hover)
    }

    @-webkit-keyframes pulse {
        0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
        70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
        100% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
    }

    @-o-keyframes pulse {
        0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
        70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
        100% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
    }

    @-ms-keyframes pulse {
        0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
        70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
        100% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
    }

    @-moz-keyframes pulse {
        0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
        70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
        100% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
    }

    @keyframes pulse {
        0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
        70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
        100% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
    }
    
    .contact-white {
        color: #fff
    }

    /* Estilização da Seção Hero com Fundo Azul */
#hero {
    background-color: var(--bs-primary); /* Usa o azul padrão do Bootstrap/Tema */
    /* Se quiser um tom específico, use: background-color: #0054a6; */
    color: #ffffff; /* Texto branco */
    padding-top: 4rem;
    padding-bottom: 4rem;
    height:  575px;
}

/* Ajuste para textos que eram cinza escuro ou preto */
#hero .lead, 
#hero p {
    color: rgba(255, 255, 255, 0.9); /* Branco com leve transparência para suavidade */
}

/* Garante que o destaque "Epson" fique branco ou com cor de destaque clara */
#hero .text-primary {
    color: #fff !important; /* Força o branco onde antes era azul */
    /* Ou use uma cor de destaque como amarelo: color: #ffc107 !important; */
}

/* Estilização da Seção Parceiros (Fundo Azul) */
#parceiros {
    background-color: var(--bs-primary); /* Mesmo azul do Hero/Loja */
    color: #ffffff;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Ajuste de cor para textos descritivos */
#parceiros .lead,
#parceiros p {
    color: rgba(255, 255, 255, 0.9);
}

/* Estilização dos itens da lista (Certificações) */
#parceiros .list-group-item-action {
    background-color: transparent; /* Fundo transparente para mostrar o azul */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda branca sutil */
    color: #ffffff;
    transition: all 0.3s ease;
    border-radius: 8px; /* Bordas arredondadas */
    margin-bottom: 10px; /* Espaço entre os itens */
}

/* Efeito ao passar o mouse na lista */
#parceiros .list-group-item-action:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo branco semitransparente */
    border-color: #ffffff;
    color: #ffffff;
}

/* Ícones dentro da lista */
#parceiros .bi {
    font-size: 1.8rem;
    color: #ffffff; /* Ícones brancos */
    /* Se preferir destaque dourado use: color: #ffc107; */
}

.selo {
    border-radius: 93px;
}

#hero img {
    margin-top: 13px !important;
}

.logo-carousel-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Máscara de gradiente para 'apagar' os logos nas laterais */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-carousel-track {
    display: flex;
    width: calc(200px * 12);
    animation: scroll 30s linear infinite;
}

.logo-slide {
    flex-shrink: 0;
    width: 200px; /* Largura do 'espaco' do slide */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px; /* Espaçamento interno */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

.logo-slide img {
    width: 170px;  
    height: 50px; 
    object-fit: contain; 
    opacity: 0.6;  
    transition: all 0.3s ease-in-out; 
}


.logo-carousel-wrapper:hover .logo-carousel-track {
    animation-play-state: paused;
}


.logo-slide:hover img {
    opacity: 1;
    transform: scale(1.1); 
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-200px * 6));
    }
}



@media (max-width: 767.98px) {
  
  
  #carouselProdutos .carousel-item .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }
  #carouselProdutos .card-title {
    font-size: 1rem; 
  }
}

#hero, #parceiros {
    background: linear-gradient(145deg, #192A8C 0%, #0077C9 50%, #00A2D9 100%) !important;
    
}

  .dsi-units-section {
    background: radial-gradient(circle at top left, #f4f7fb 0, #ffffff 55%);
  }

  .dsi-map-wrapper {
    padding: 1.5rem 1.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #005baa 0%,#0077C9 50%, #00A2D9 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
  }

  .dsi-map-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom right, rgba(15,23,42,0.25), transparent 55%);
    opacity: 0.55;
    pointer-events: none;
  }

  .dsi-map-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .9rem;
    border-radius: 999px;
    background: rgba(15,23,42,0.4);
    font-size: .75rem;
    font-weight: 500;
    margin-bottom: .75rem;
  }

  .dsi-map-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.35);
  }

  .dsi-units-title {
    position: relative;
    font-size: clamp(1.6rem, 2.3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: .6rem;
    z-index: 1;
  }

  .dsi-map-wrapper p {
    position: relative;
    z-index: 1;
  }

  .dsi-map-image-wrapper {
    position: relative;
    z-index: 1;
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgba(15,23,42,0.4);
    padding: 9px;
  }

  .dsi-map-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .dsi-map-footnote {
    position: relative;
    z-index: 1;
  }

  .dsi-accordion-wrapper {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.5rem 1.5rem 1.4rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 40px rgba(15,23,42,0.08);
  }

  .dsi-accordion-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
  }

  .dsi-accordion-wrapper .accordion-item {
    border: none;
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: .6rem;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
  }

  .dsi-accordion-wrapper .accordion-button {
    font-size: .92rem;
    font-weight: 600;
    color: #111827;
    background-color: #f9fafb;
    padding: .75rem 1rem;
  }

  .dsi-accordion-wrapper .accordion-button:not(.collapsed) {
    background-color: #e5f0ff;
    color: #0f172a;
    box-shadow: inset 0 -1px 0 rgba(15,23,42,0.05);
  }

  .dsi-accordion-wrapper .accordion-button:focus {
    box-shadow: 0 0 0 .15rem rgba(0,91,170,0.28);
  }

  .dsi-accordion-wrapper .accordion-body {
    padding: .85rem 1rem 1rem;
    font-size: .9rem;
    background-color: #ffffff;
  }

  .dsi-accordion-wrapper .btn {
    font-size: .78rem;
    border-radius: 999px;
    padding-inline: .8rem;
  }

  @media (max-width: 991.98px) {
    .dsi-map-wrapper {
      padding: 1.25rem 1.3rem;
    }
    .dsi-accordion-wrapper {
      padding: 1.25rem 1.1rem;
    }
  }