/* ===== CORES INSTITUCIONAIS - PLANO PNEUMATIC ===== */
:root {
    --azul-escuro:  #0d4a83;
    --azul-medio:   #4a90ca;
    --azul-claro:   #a0c4e5;   /* novo — fundo de Produtos e Blog */
    --cinza-escuro: #777777;   /* novo — fundo de Sobre nós e Contato */
    --cinza-medio:  #989596;
    --cinza-claro:  #d1d2d4;
    --branco:       #ffffff;
    --preto:        #000000;
}

/* ===== MAPA DE COR POR PÁGINA =====
   Home        → --azul-escuro   #0d4a83
   Sobre nós   → --cinza-escuro  #777777
   Produtos    → --azul-claro    #a0c4e5
   Serviços    → --cinza-medio   #989596
   Circuito    → --azul-escuro   #0d4a83
   Contato     → --cinza-escuro  #777777
   Blog        → --azul-claro    #a0c4e5
   FAQ         → --cinza-medio   #989596
   ============================================ */

/* ===== APLICAÇÕES GLOBAIS ===== */
body {
    color: var(--preto);
    /* background definido por cada página individualmente */
    font-family: 'Poppins', sans-serif;
}

/* TÍTULOS */
h1, h2, h3, h4, h5, h6 {
    color: var(--azul-escuro);
}

/* LINKS */
a {
    color: var(--azul-escuro);
    transition: color 0.3s ease;
}
a:hover {
    color: var(--azul-medio);
}

/* ===== CORES DE TEXTO ===== */
.text-primary-custom   { color: var(--azul-escuro)  !important; }
.text-secondary-custom { color: var(--azul-medio)   !important; }
.text-muted-custom     { color: var(--cinza-medio)  !important; }
.text-white-custom     { color: var(--branco)       !important; }
.text-dark-custom      { color: var(--preto)        !important; }

/* ===== CORES DE FUNDO ===== */
.bg-primary-custom     { background-color: var(--azul-escuro)  !important; }
.bg-secondary-custom   { background-color: var(--azul-medio)   !important; }
.bg-light-blue-custom  { background-color: var(--azul-claro)   !important; }
.bg-dark-gray-custom   { background-color: var(--cinza-escuro) !important; }
.bg-light-custom       { background-color: var(--cinza-claro)  !important; }
.bg-mid-gray-custom    { background-color: var(--cinza-medio)  !important; }
.bg-white-custom       { background-color: var(--branco)       !important; }
.bg-dark-custom        { background-color: var(--preto)        !important; }

/* ===== BOTÕES PERSONALIZADOS ===== */
.btn-primary-custom {
    background: var(--azul-escuro);
    color: var(--branco);
    border: none;
    padding: 12px 30px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-primary-custom:hover {
    background: var(--azul-medio);
    color: var(--branco);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(13,74,131,0.3);
}

.btn-outline-custom {
    background: transparent;
    color: var(--azul-escuro);
    border: 2px solid var(--azul-escuro);
    padding: 10px 25px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}
.btn-outline-custom:hover {
    background: var(--azul-escuro);
    color: var(--branco);
    border-color: var(--azul-escuro);
}

/* Botão sólido branco — uso sobre fundos coloridos */
.btn-solid-white {
    display: inline-block;
    background: var(--branco);
    color: var(--azul-escuro);
    padding: 14px 40px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--branco);
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-solid-white:hover {
    background: transparent;
    color: var(--branco);
}

/* Botão ghost branco — uso sobre fundos coloridos */
.btn-ghost-white {
    display: inline-block;
    background: transparent;
    color: var(--branco);
    padding: 14px 40px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.40);
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-ghost-white:hover {
    border-color: var(--branco);
    background: rgba(255,255,255,0.08);
    color: var(--branco);
}

/* ===== BADGES ===== */
.badge-custom {
    background: var(--azul-escuro);
    color: var(--branco);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge sobre fundos coloridos — borda fina, sem fill */
.badge-page {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.32);
    color: rgba(255,255,255,0.70);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    margin-bottom: 14px;
}

/* ===== BORDAS ===== */
.border-custom { border-color: var(--cinza-claro) !important; }

/* ===== CARD HOVER ===== */
.hover-card {
    transition: transform 0.4s, box-shadow 0.4s;
    overflow: hidden;
}
.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(13,74,131,0.15) !important;
}

/* ===== ÍCONES ===== */
.icon-primary   { color: var(--azul-escuro); }
.icon-secondary { color: var(--azul-medio);  }
.icon-muted     { color: var(--cinza-medio); }

/* ===== SEÇÕES ===== */
.section-padding {
    padding: 80px 0;
}
.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--azul-escuro);
    margin-bottom: 1rem;
}
.section-subtitle {
    font-size: 1.1rem;
    color: var(--cinza-medio);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== DIVISOR DE SEÇÃO — uso sobre fundos coloridos ===== */
.page-divisor {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.11);
    margin: 72px 0;
}

/* ===== TIPOGRAFIA SOBRE FUNDOS COLORIDOS ===== */
/* nível 1 — título principal */
.t1 { color: var(--branco); font-weight: 800; letter-spacing: -0.5px; }
/* nível 2 — subtítulo / lead */
.t2 { color: rgba(255,255,255,0.62); font-weight: 300; }
/* corpo */
.tc { color: rgba(255,255,255,0.78); line-height: 1.75; }

/* ===== ACESSIBILIDADE ===== */
:focus {
    outline: 3px solid var(--azul-medio);
    outline-offset: 2px;
}

/* ===== LAYOUT QUADRADO (SEM ARREDONDAMENTOS) ===== */
* { border-radius: 0 !important; }

/* Exceção para o botão WhatsApp */
.produto-whatsapp,
.zoom-whatsapp,
.whatsapp-float {
    border-radius: 50px !important;
}

/* ===== RESPONSIVO — MOBILE ===== */
@media (max-width: 768px) {

    .section-padding   { padding: 40px 0 !important; }
    .section-title     { font-size: 24px !important; margin-bottom: 15px !important; }
    .section-subtitle  { font-size: 16px !important; }
    .display-5         { font-size: 26px !important; }
    .display-6         { font-size: 22px !important; }
    .page-divisor      { margin: 44px 0; }

    .slider-height2    { height: 200px !important; }
    .hero-cap h2       { font-size: 24px !important; }
    .hero-cap p        { font-size: 14px !important; }

    img { max-width: 100%; height: auto; }

    .col-lg-4, .col-md-6 { width: 100%; margin-bottom: 15px; }

    .card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }
    .card-img-top {
        width: 100%; height: 180px;
        object-fit: cover;
        margin-right: 0; margin-bottom: 15px;
        background: var(--cinza-claro);
    }
    .card-body        { flex: 1; padding: 0 10px 10px; text-align: center; }
    .card-title       { font-size: 16px; margin-bottom: 5px; font-weight: 600; }
    .card-text        { font-size: 13px; margin-bottom: 10px; line-height: 1.4; }

    .btn-outline-custom { width: auto; padding: 8px 15px; font-size: 12px; min-height: 36px; }

    .categoria-card   { flex-direction: column; }
    .categoria-imagem { width: 100%; height: 150px; }

    .btn-primary-custom,
    .btn-outline-custom { width: 100%; text-align: center; padding: 12px 20px; font-size: 16px; min-height: 48px; }

    .recomendacoes-list,
    .problemas-list    { columns: 1 !important; }

    footer .row > div  { margin-bottom: 30px; text-align: center; }
    .footer-social     { justify-content: center; }

    .mb-5              { margin-bottom: 25px !important; }
    .g-5               { gap: 15px !important; }
    .text-justify      { text-align: left !important; }

    .carousel-caption {
        display: block !important;
        position: relative;
        bottom: auto; left: auto; right: auto;
        background: rgba(0,0,0,0.7);
        margin-top: 5px; padding: 10px;
    }
    .carousel-caption h4 { font-size: 16px; }
    .carousel-caption p  { font-size: 12px; }

    .info-card  { margin-bottom: 25px; }
    .info-item  { flex-direction: column; align-items: center; text-align: center; }
    .info-icon  { margin-bottom: 10px; }

    /* ===== CORREÇÃO: TEXTOS BRANCOS NO MOBILE ===== */
    /* Todo o conteúdo principal fica branco, variando apenas tamanho e peso */
    main,
    .main-content,
    section:not(.navbar):not(footer),
    .container:not(.navbar .container):not(footer .container) {
        color: var(--branco) !important;
    }
    
    /* Todos os textos dentro do conteúdo principal */
    main p,
    main span,
    main li,
    main h1, main h2, main h3, main h4, main h5, main h6,
    main a:not(.btn-primary-custom):not(.btn-outline-custom):not(.btn-solid-white):not(.btn-ghost-white),
    section p,
    section span,
    section li,
    section h1, section h2, section h3, section h4, section h5, section h6,
    section a:not(.btn-primary-custom):not(.btn-outline-custom):not(.btn-solid-white):not(.btn-ghost-white),
    .card,
    .card-title,
    .card-text,
    .card-body,
    .section-title,
    .section-subtitle,
    .info-card,
    .categoria-card {
        color: var(--branco) !important;
    }
}
.card-categoria h3,
    .produto-info h5 {
        color: #0d4a83 !important;
    }
    
    .card-descricao,
    .produto-ref,
    .produto-descricao {
        color: #777777 !important;
    }

/* ===== RESPONSIVO — TABLET ===== */
@media (min-width: 769px) and (max-width: 991px) {

    .col-md-4, .col-md-6, .col-lg-4 { margin-bottom: 20px; }
    .display-5    { font-size: 28px !important; }
    .slider-height2 { height: 300px !important; }
    .hero-cap h2  { font-size: 32px !important; }
    .page-divisor { margin: 56px 0; }

    .card         { flex-direction: column; }
    .card-img-top { width: 100%; height: 180px; margin-right: 0; margin-bottom: 10px; object-fit: cover; background: var(--cinza-claro); }
    .card-body    { text-align: center; }
}