/* ===========================================================================
   TSW MAQUINAS — camada de acabamento
   ---------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   O tema tem uma ordem de cascade propria, e no site real da TSW o style.css e
   o ULTIMO a carregar. Eu havia invertido essa ordem (colocando overwrite.css
   por cima) achando que o nome "overwrite" indicava isso — e com isso mudei a
   cor do site inteiro e me afastei do original. Errado.
   A ordem do tema voltou ao que e no site real, o overwrite.css voltou a ser
   byte a byte o do legado, e todo ajuste nosso passou a viver AQUI, num arquivo
   que carrega DEPOIS de todos. Assim os ajustes vencem sem baguncar o cascade
   de quem veio antes, e da para remover tudo apagando um arquivo so.
   =========================================================================== */


/* ===========================================================================
   0. PALETA -- "COBALTO & GRAFITE" (11/09/2026)
   ---------------------------------------------------------------------------
   O site usava o verde var(--tsw-primary). O admin trocou para cobalto sobre grafite, e o
   site precisa falar a MESMA lingua -- senao o cliente ve uma marca no site e
   outra ao entrar no sistema.
   Os tokens moram aqui porque este arquivo e o ULTIMO da cascade do frontend
   (Frontend.php:435) e e, por decisao anterior, o unico lugar onde ajuste nosso
   pode viver: o overwrite.css e byte a byte o do legado e o bootstrap.css e
   vendorizado. Assim tudo se desfaz apagando um arquivo so.
   =========================================================================== */
:root {
    --tsw-chrome:        #0C2340;   /* barra do topo, rodape */
    --tsw-primary:       #0B63CE;   /* acao, link, destaque */
    --tsw-primary-dark:  #0951AB;   /* hover */
    --tsw-primary-light: #4E9BFF;   /* sobre fundo escuro */
    --tsw-primary-soft:  #E7F0FD;
    --tsw-texto:         #3A3A3A;
    --tsw-ok:            #0A7A54;   /* sucesso -- o MESMO verde do sistema */
    --tsw-ok-bg:         #E2F4EC;
    --tsw-danger:        #C0362C;
}


/* ===========================================================================
   1. LOGO — acabamento em relevo
   O PNG tem fundo transparente, entao a profundidade vem de drop-shadow (que
   segue o recorte da arte) e nao de box-shadow (que sombrearia o retangulo).
   Tres sombras: uma de contato, uma media que da volume e uma larga que
   descola a logo da barra verde.
   =========================================================================== */
.logo-tsw-link {
    display: inline-block;
    line-height: 0;
    margin-top: 8px;
    text-decoration: none;
}

.logo-tsw {
    display: block;
    height: 46px;
    width: auto;
    filter:
        drop-shadow(0 1px 0    rgba(4, 46, 38, 0.55))
        drop-shadow(0 2px 2px  rgba(4, 46, 38, 0.35))
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.30));
    transform: translateZ(0);
    transition: transform .25s ease, filter .25s ease;
}

.logo-tsw-link:hover .logo-tsw,
.logo-tsw-link:focus .logo-tsw {
    transform: translateY(-2px) scale(1.02);
    filter:
        drop-shadow(0 1px 0     rgba(4, 46, 38, 0.60))
        drop-shadow(0 4px 3px   rgba(4, 46, 38, 0.38))
        drop-shadow(0 14px 22px rgba(0, 0, 0, 0.34));
}

/* A barra do topo tambem ganha profundidade, senao a logo flutua sozinha sobre
   um retangulo chapado. */
.navbar-inner,
#header .navbar-inner {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.10);
}

@media (max-width: 979px) { .logo-tsw { height: 38px; } }
@media (max-width: 480px) {
    .logo-tsw { height: 32px; }
    .logo-tsw-link { margin-top: 10px; }
}


/* ===========================================================================
   2. ICONES DOS PRODUTOS
   Eram PNG cinza-escuro em cima do bloco verde: sem contraste e com cara de
   recorte errado. Ficam brancos, com leve relevo.
   =========================================================================== */
.section.green .service-box img {
    filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
    transition: transform .25s ease;
}
.section.green .service-box:hover img { transform: translateY(-4px) scale(1.04); }


/* ===========================================================================
   3. TITULO DE SECAO — traco da marca embaixo
   =========================================================================== */
.section .container > h4 {
    position: relative;
    padding-bottom: 22px;
    margin-bottom: 34px;
}
.section .container > h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 74px;
    height: 4px;
    margin-left: -37px;
    border-radius: 2px;
    background: var(--tsw-primary);
}
/* Nas secoes que ja sao verdes o traco vira branco, para ter contraste. */
.section.green .container > h4::after { background: #ffffff; opacity: .85; }


/* ===========================================================================
   4. LEGIBILIDADE
   O texto do corpo era #5E5E5E sobre fundo #F2F2F2 — cinza sobre cinza.
   =========================================================================== */
#about p, .section p { color: #3A3A3A; }
.section.green p, .section.green .service-box p { color: rgba(255, 255, 255, 0.92); }

#about h2, #contact h3 { color: var(--tsw-primary-dark); }

.section a:not(.btn):not(.logo-tsw-link)        { color: var(--tsw-primary-dark); }
.section a:not(.btn):not(.logo-tsw-link):hover  { color: var(--tsw-primary); }


/* ===========================================================================
   5. BOTAO PRINCIPAL — era var(--tsw-primary-light) do tema; passa a ser a cor da marca
   =========================================================================== */
.btn.btn-theme,
input.btn-theme,
#theme-form input[type=submit] {
    background: var(--tsw-primary) !important;
    border: 0 !important;
    color: #fff !important;
    padding: 12px 26px;
    border-radius: 3px;
    box-shadow: 0 2px 0 var(--tsw-primary-dark), 0 6px 14px rgba(0, 0, 0, 0.18);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn.btn-theme:hover,
input.btn-theme:hover,
#theme-form input[type=submit]:hover {
    background: var(--tsw-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--tsw-chrome), 0 10px 20px rgba(0, 0, 0, 0.22);
}


/* ===========================================================================
   6. SECAO "QUEM SOMOS" — equilibrio das colunas
   O texto vinha em span4 (33% da largura) e a marca d'agua em span6 (50%): a
   coluna de leitura ficava estreita e sobrava meia tela vazia. No HTML foi para
   5 e 5; aqui as colunas se alinham pelo centro vertical.
   =========================================================================== */
#about .row { display: flex; flex-wrap: wrap; align-items: center; }
#about .about-texto { padding-right: 24px; }
#about .about-marca img { max-width: 72%; height: auto; }

@media (max-width: 767px) {
    #about .row { display: block; }
    #about .about-texto { padding-right: 0; }
    #about .about-marca img { max-width: 46%; margin-top: 8px; }
}


/* ===========================================================================
   7. BLOCO DA CITACAO
   O tema trazia uma foto generica de rua ao entardecer, sem relacao com
   industria, e um icone de foguete. Agora: foto real da fabrica da TSW com veu
   na cor da marca, e a aguia da marca no lugar do foguete.
   =========================================================================== */
section.spacer.bg3 {
    background:
        linear-gradient(rgba(12, 35, 64, 0.82), rgba(12, 35, 64, 0.82)),
        url(../img/produtos/03.jpg) 50% 30% no-repeat fixed !important;
    background-size: auto, cover !important;
}
section.spacer.bg3 blockquote.large        { color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
section.spacer.bg3 blockquote.large:before { color: var(--tsw-primary-light) !important; opacity: .9; }

.citacao-marca {
    display: block;
    margin: 26px auto 0;
    height: 120px;
    width: auto;
    opacity: .95;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.40));
    transition: transform .3s ease;
}
.citacao-marca:hover { transform: translateY(-4px); }

@media (max-width: 767px) { .citacao-marca { height: 78px; margin-top: 18px; } }


/* ===========================================================================
   8. FAIXA DE FOTOS
   - A cor era azul-marinho #132636, fora da paleta da TSW.
   - A faixa tem transform: translateZ sob perspectiva, o que a deixa
     VISUALMENTE mais larga que o pai (1380 num pai de 1366). Nao e largura,
     entao max-width nao resolve: o recorte tem que ser no container, senao o
     site inteiro ganha barra de rolagem horizontal no desktop.
   =========================================================================== */
.shelf            { background: var(--tsw-chrome) !important; }
.container-slide  { overflow-x: hidden !important; }


/* ===========================================================================
   9. LIGHTBOX DA GALERIA — botoes sem imagem
   O lightbox.css aponta para ../images/close.png, prev.png, next.png e
   loading.gif, mas a pasta "images" nunca existiu neste template (nem no site
   legado da TSW): eram 4 requisicoes 404 por abertura da galeria e os botoes
   ficavam invisiveis. Os icones passam a ser desenhados com o Font Awesome que
   o tema ja carrega — nenhum arquivo novo e necessario.
   =========================================================================== */
.lb-data .lb-close,
.lb-nav a.lb-prev,
.lb-nav a.lb-next,
.lb-cancel { background-image: none !important; }

.lb-data .lb-close::before,
.lb-nav a.lb-prev::before,
.lb-nav a.lb-next::before,
.lb-cancel::before {
    font-family: 'FontAwesome';
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    display: block;
}

.lb-data .lb-close::before { content: "\f00d"; font-size: 22px; line-height: 30px; text-align: right; }
.lb-nav a.lb-prev::before  { content: "\f053"; font-size: 30px; margin-left: 14px; }
.lb-nav a.lb-next::before  { content: "\f054"; font-size: 30px; text-align: right; margin-right: 14px; }
.lb-cancel::before         { content: "\f110"; font-size: 24px; line-height: 32px; animation: fa-spin 1.6s infinite linear; }

.lb-nav a.lb-prev::before,
.lb-nav a.lb-next::before { position: relative; top: 45%; }


/* ===========================================================================
   10. MAPA DO CONTATO — recorte
   ACHADO SO COM O NAVEGADOR VISIVEL E ROLANDO A PAGINA: quando o mapa do Google
   inicializa (ao entrar na tela), os tiles internos dele renderizam mais largos
   que a caixa e empurram o documento — a largura saltava de 1425 para 2090px e
   o site inteiro ganhava barra de rolagem horizontal. Carregar a pagina sem
   rolar nao reproduz, por isso a varredura anterior nunca pegou.
   As secoes tambem recortam porque o tema anima blocos entrando pela lateral
   (classes flyLeft/flyRight), que durante a animacao ficam fora da tela.
   =========================================================================== */
#mapa {
    overflow: hidden;
    max-width: 100%;
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

#contact,
#about,
#services,
section.spacer {
    overflow-x: hidden;
}

/* ==================================================================
   O TITULO DO HEROI NAO PODE SER CORTADO NO CELULAR  (06/09/2026)

   MEDIDO no Chrome, home do site publico:

     viewport 390px -> o <p> do slider mede 350px, mas o <strong>
                       dentro dele mede 502px ("INTELIGENTES").
                       right = 522 num documento de 390.
     viewport 1366px-> o MESMO <strong> mede 502px.

   Ou seja: `#main-flexslider ul.slides li p` (style.css:382) fixa
   `font-size: 72px` e nunca reduz. O documento nao rola na horizontal
   -- algo acima clipa --, entao a palavra e simplesmente CORTADA NO
   MEIO. E a primeira coisa que um cliente ve no celular.

   Corrigido aqui, no CSS proprio da TSW, e nao no `style.css`: aquele
   arquivo e do tema herdado e mexer nele espalha efeito por telas que
   nao estao neste escopo.

   `clamp()` no lugar de um tamanho fixo por faixa: o titulo passa a
   acompanhar a largura, sem degrau feio entre 390 e 767. O teto de
   60px so vale no celular; acima de 768px o desktop segue com os 72px
   originais, intocado.

   Conta: em 390px, 8.5vw = 33px -> "INTELIGENTES" ocupa ~230px,
   dentro dos 350px disponiveis. Em 767px, o teto de 60px da ~418px,
   dentro dos ~727px. As tres frases do slider cabem.
   ================================================================== */
@media (max-width: 767px) {

    #main-flexslider ul.slides li p {
        font-size: clamp(24px, 8.5vw, 60px);
        /* Rede de seguranca: palavra unica maior que a tela quebra em vez
           de vazar. Sozinho nao resolveria (o problema e o tamanho da
           fonte), mas evita corte se alguem trocar a frase por outra
           maior. */
        overflow-wrap: break-word;
        word-break: break-word;
    }
}


/* ===========================================================================
   10. O VERDE QUE MORA EM ARQUIVO QUE NAO PODEMOS EDITAR (11/09/2026)
   ---------------------------------------------------------------------------
   Tres verdes ficaram fora do alcance direto:
     - `bootstrap.css` (Bootstrap 2.3.2 VENDORIZADO, editado a mao no passado):
        pinta a barra do topo com um gradiente chapado #1bac91 e o menu suspenso;
     - `style.css` (tema Maxim): `.section.green`, `.btn-success`, dropdown;
     - `overwrite.css`: as barras de progresso -- e esse e byte a byte o do
        legado, entao NAO se toca nele, por decisao ja registrada no topo deste
        arquivo.
   Editar qualquer um dos tres quebraria essa regra. Como este arquivo carrega
   por ULTIMO, a sobreposicao aqui e o caminho previsto pelo proprio projeto.
   =========================================================================== */

/* Barra do topo: era o gradiente verde chapado do bootstrap vendorizado.
   O `background-image` precisa ser anulado -- so trocar a cor nao adianta,
   porque o gradiente e pintado POR CIMA dela. */
.navbar-inverse .navbar-inner,
#header .navbar-inverse .navbar-inner {
    background-color: var(--tsw-chrome) !important;
    background-image: none !important;
    border-bottom: 3px solid var(--tsw-primary) !important;
}

/* Menu suspenso do topo */
.nav > li > .dropdown-menu {
    background-color: var(--tsw-chrome) !important;
    background: var(--tsw-chrome) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.nav > li > .dropdown-menu a        { border-bottom-color: rgba(255, 255, 255, 0.10) !important; }
.nav > li > .dropdown-menu a:hover  { background: var(--tsw-primary) !important; color: #fff !important; }

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: var(--tsw-primary) !important;
}

/* Secoes de fundo colorido do tema */
.spacer.green,
.section.green { background: var(--tsw-primary) !important; }

/* Botao "success" do tema -- no site ele e o botao de acao, nao de sucesso */
.btn-success,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--tsw-primary) !important;
    background-image: none !important;
    border-color: var(--tsw-primary) !important;
    color: #fff !important;
}
.btn-success:hover { background-color: var(--tsw-primary-dark) !important; }

/* Barras de progresso (vinham do overwrite.css, que fica intocado) */
.progress .bar-success,
.progress-striped .bar-success {
    background-color: var(--tsw-primary) !important;
    background-image: none !important;
}


/* As faixas de titulo das paginas internas (Dosadores / Tratadores / Canetas)
   usam `.spacer.dark-green`, e o hover dos cartoes de solucao usa um terceiro
   verde. Ficaram de fora da regra acima porque o nome da classe diz "green" mas
   o que ela significa e "faixa escura de titulo" -- o nome ficou preso a cor
   antiga. Aqui a faixa vira o grafite da marca. */
.spacer.dark-green,
.section.dark-green { background: var(--tsw-chrome) !important; }

section#services.section.green .service-box:hover { background: var(--tsw-primary-dark) !important; }


/* O `.btn-primary` do tema era um teal #09828c -- o ultimo verde do site, e
   justo no botao das paginas de produto ("Saiba mais"). */
.btn-primary,
.btn-primary:focus {
    background-color: var(--tsw-primary) !important;
    background-image: none !important;
    border-color: var(--tsw-primary) !important;
    color: #fff !important;
}
.btn-primary:hover { background-color: var(--tsw-primary-dark) !important; }


/* A caixa de "mensagem enviada" do formulario de contato usa `color: green` --
   a palavra-chave crua do CSS (#008000). Verde ali esta CERTO (e sucesso), mas
   passa a ser o MESMO verde de sucesso do resto do sistema, nao um verde solto. */
#sendmessage {
    color: var(--tsw-ok) !important;
    border-color: var(--tsw-ok) !important;
    background: var(--tsw-ok-bg) !important;
}
#errormessage { color: var(--tsw-danger) !important; border-color: var(--tsw-danger) !important; }


/* ===========================================================================
   MESMO DESENHO DE LETRA DO SISTEMA (e do Telplastic Fortal).
   ---------------------------------------------------------------------------
   O site puxava 'Open Sans' direto do Google (`@import` em style.css:25), ou
   seja, recebia a versao ATUAL da fonte (v44, variavel). O admin, desde
   14/09/2026, serve o Open Sans de 2011 — o mesmo binario do Telplastic Fortal
   (ver o cabecalho de template/admin/default/css/font.css).

   Sem isto, site e sistema exibiriam o MESMO nome de fonte com tracos
   diferentes. Os 4 @font-face abaixo sao identicos aos do admin e apontam para
   copias dos mesmos .woff em `css/fonts/`.

   Funciona sem reordenar nada: este arquivo e a camada da TSW e carrega por
   ULTIMO (Frontend.php:435), entao vence o @import do Google.

   Aqui so muda o DESENHO da letra. Layout, tamanhos e cores do site sao os da
   TSW e nao tem relacao com o Fortal — o site do Fortal e outro tema (usa
   Raleway/Poppins) e nao serve de referencia para esta parte. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/OpenSans-Light.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/OpenSans-SemiBold.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/OpenSans-Bold.woff) format('woff');
}