/* ==========================================================================
   1 SEÇÃO: HOME CIVIL E BREADCRUMBS (#SectionHomeCivil)
   ========================================================================== */

/* 1/1 BACKGROUND E TIPOGRAFIA */
.jn-home-civil-bg { 
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
}
.jn-main-heading { 
    color: #333; 
    font-weight: 800; 
    font-size: 2.2rem; 
    margin-bottom: 25px; 
    line-height: 1.2; 
}
.jn-main-text { 
    font-size: 1.1rem; 
    color: #555; 
    line-height: 1.8; 
    margin-bottom: 30px; 
}
.blue-text { 
    color: #007FFF; 
}

/* 1/2 IMAGEM PRINCIPAL E BADGE DE EXPERIÊNCIA */
.about-img-container { 
    position: relative; 
    padding: 20px; 
}
.jn-border-deco { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 80%; 
    height: 80%; 
    border: 10px solid #007FFF; 
    border-radius: 15px; 
    z-index: 0; 
    opacity: 0.1; 
}
.jn-img-premium { 
    border-radius: 15px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    position: relative; 
    z-index: 1; 
}
.experience-badge { 
    position: absolute; 
    bottom: 40px; 
    right: 0; 
    background: #007FFF; 
    color: white; 
    padding: 20px; 
    border-radius: 10px; 
    z-index: 2; 
    box-shadow: 0 10px 20px rgba(0,127,255,0.3); 
}
.exp-number { 
    font-size: 24px; 
    font-weight: bold; 
    display: block; 
    line-height: 1; 
}
.exp-label { 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* 1/3 CARDS MINI */
.jn-card-mini { 
    display: flex; 
    gap: 15px; 
    transition: 0.3s; 
    padding: 10px; 
}
.jn-card-mini:hover { 
    background: rgba(255,255,255,0.5); 
    border-radius: 10px; 
}
.jn-card-mini i { 
    font-size: 24px; 
    color: #007FFF; 
}
.jn-card-mini h5 { 
    font-weight: bold; 
    margin: 0; 
}
.jn-card-mini p { 
    font-size: 13px; 
    color: #777; 
    margin: 0; 
}

/* 1/4 BOTÃO PREMIUM 3D (FORMATO MODERNO, NÃO BOLACHA) */
.btn-jn-premium { 
    background: #007FFF; 
    color: white !important; 
    padding: 15px 40px; 
    border-radius: 8px; /* Removido o 50px, agora é retangular moderno */
    text-decoration: none; 
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
    transition: 0.2s ease-in-out; 
    /* O Segredo do 3D puro: Sombra sólida para simular profundidade + Sombra esfumaçada */
    box-shadow: 0 6px 0 #005bbd, 0 10px 20px rgba(0,0,0,0.15); 
}
.btn-jn-premium:hover { 
    background: #0066cc; 
    /* Ao passar o mouse, ele "afunda" e a sombra sólida diminui */
    transform: translateY(4px); 
    box-shadow: 0 2px 0 #005bbd, 0 5px 10px rgba(0,0,0,0.15); 
}


/* ==========================================================================
   2 SEÇÃO: ARQUITETURA (#arquitetura)
   ========================================================================== */

/* 2/1 TEXTOS E LISTA DE CHECK */
.jn-arch-section { 
    background-color: #ffffff; 
    padding: 80px 0;
}
.jn-pre-title-alt { 
    color: #007FFF; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 700; 
    display: block; 
    margin-bottom: 15px; 
    font-size: 0.9rem; 
}
.jn-title-strong { 
    font-weight: 800; 
    font-size: 2.5rem; 
    color: #222; 
    margin-bottom: 25px; 
    line-height: 1.2; 
}
.jn-p-desc { 
    font-size: 1.1rem; 
    color: #555; 
    line-height: 1.8; 
}
.jn-check-list-arch { 
    list-style: none; 
    padding: 0; 
    margin-top: 25px; 
}
.jn-check-list-arch li { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 18px; 
    color: #444; 
}
.jn-check-list-arch li i { 
    color: #007FFF; 
    margin-right: 12px; 
    font-size: 1.2rem; 
    line-height: 1; 
}

/* 2/2 BOTÃO WHATSAPP DARK (ESTILO 3D) */
.btn-arch-premium { 
    background: #222; 
    color: #ffffff !important; 
    padding: 16px 35px; 
    border-radius: 8px; /* Formato moderno */
    text-decoration: none; 
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    transition: 0.2s ease-in-out; 
    box-shadow: 0 6px 0 #000000, 0 10px 20px rgba(0,0,0,0.15); 
}
.btn-arch-premium:hover { 
    background: #007FFF !important; 
    color: #fff !important;
    transform: translateY(4px); 
    box-shadow: 0 2px 0 #005bbd, 0 5px 10px rgba(0,127,255,0.2); 
}

/* 2/3 GALERIA DE IMAGENS E TAG 3D */
.jn-img-arch-main { 
    border-radius: 10px; 
    height: 300px; 
    width: 100%; 
    object-fit: cover; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
}
.jn-img-arch-side { 
    border-radius: 10px; 
    height: 140px; 
    width: 100%; 
    object-fit: cover; 
}
.jn-img-arch-wide { 
    border-radius: 10px; 
    height: 200px; 
    width: 100%; 
    object-fit: cover; 
}
.jn-experience-box-blue { 
    background: #007FFF; 
    height: 140px; 
    border-radius: 10px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    text-align: center; 
}
.jn-experience-box-blue .box-title { 
    font-size: 32px; 
    font-weight: 800; 
    line-height: 1; 
}
.jn-experience-box-blue .box-sub { 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
.jn-img-featured-wrapper { 
    position: relative; 
}
.jn-img-tag { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    background: rgba(255,255,255,0.95); 
    padding: 10px 20px; 
    border-radius: 5px; 
    font-size: 13px; 
    font-weight: 700; 
    color: #222; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}


/* ==========================================================================
   3 SEÇÃO: SOLUÇÕES EM ENGENHARIA (TABS) (#services-engineering)
   ========================================================================== */

/* 3/1 NAVEGAÇÃO DAS ABAS (MANTIDO O FORMATO BOLACHA) */
.jn-nav-pills { 
    gap: 10px; 
}
.jn-nav-pills .nav-link { 
    background: #f0f2f5; 
    color: #444; 
    border-radius: 50px; /* Mantido redondo conforme solicitado */
    padding: 12px 25px; 
    font-weight: 700; 
    font-size: 0.9rem; 
    transition: 0.3s; 
    border: 1px solid #e0e0e0; 
}
.jn-nav-pills .nav-link:hover { 
    background: #e9ecef; 
}
.jn-nav-pills .nav-link.active { 
    background: #007FFF !important; 
    color: #fff !important; 
    border-color: #007FFF; 
    box-shadow: 0 5px 15px rgba(0, 127, 255, 0.2); 
}

/* 3/2 CARDS DE SERVIÇOS PREMIUM */
.service-item-premium { 
    background: #fff; 
    padding: 30px; 
    border-radius: 12px; 
    border-bottom: 4px solid #f0f2f5; 
    height: 100%; 
    transition: 0.4s; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
}
.service-item-premium:hover { 
    transform: translateY(-10px); 
    border-bottom-color: #007FFF; 
    box-shadow: 0 10px 30px rgba(0,127,255,0.15) !important; 
}
.service-item-premium .icon { 
    font-size: 40px; 
    color: #007FFF; 
    margin-bottom: 20px; 
}
.service-item-premium h4 { 
    font-weight: 800; 
    font-size: 1.15rem; 
    color: #222; 
    margin-bottom: 15px; 
}
.service-item-premium p { 
    font-size: 0.9rem; 
    color: #666; 
    line-height: 1.6; 
    margin: 0; 
}

/* 3/3 BOX DE CALL TO ACTION (CTA PREÇOS) */
.cta-prices-box { 
    background: #eef7ff; 
    padding: 40px; 
    border-radius: 20px; 
    border: 2px dashed #007FFF; 
}
.cta-prices-box h3 { 
    color: #0056b3; 
    font-weight: 800; 
    margin-bottom: 15px; 
}
.cta-prices-box p { 
    font-size: 1.1rem; 
    color: #444; 
    margin-bottom: 25px; 
}


/* ==========================================================================
   4 SEÇÃO: EXCELÊNCIA EM CONSTRUÇÃO (#constructions)
   ========================================================================== */

/* 4/1 CARDS E BACKGROUNDS DAS OBRAS */
.constructions .card-item { 
    border: 1px solid rgba(82, 86, 94, 0.2); 
    background: #fff; 
    position: relative; 
    border-radius: 0; 
    height: 100%; 
}
.constructions .card-item .card-bg { 
    min-height: 300px; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 100%; 
}

/* 4/2 TEXTOS E ESPAÇAMENTOS */
.constructions .card-item .card-body { 
    padding: 30px; 
}
.constructions .card-item h4 { 
    font-weight: 700; 
    font-size: 20px; 
    margin-bottom: 15px; 
    color: #333; 
}
.constructions .card-item p { 
    color: #555; 
    margin: 0; 
}


/* ==========================================================================
   5 SEÇÃO: NOSSO PORTFÓLIO E PROJETOS (#projects)
   ========================================================================== */

/* 5/1 FILTROS DE NAVEGAÇÃO DOS PROJETOS (CORRIGIDO PARA TEXTO LIMPO) */
.projects .portfolio-flters { 
    padding: 0; 
    margin: 0 auto 30px auto; 
    list-style: none; 
    text-align: center; 
}
.projects .portfolio-flters li { 
    cursor: pointer; 
    display: inline-block; 
    padding: 0; 
    font-size: 18px; 
    font-weight: 600; 
    margin: 0 15px; 
    line-height: 1; 
    margin-bottom: 5px; 
    color: #444;
    transition: all 0.3s ease-in-out; 
}
.projects .portfolio-flters li:hover,
.projects .portfolio-flters li.filter-active { 
    color: #007FFF; 
}

/* 5/2 PORTFÓLIO OVERLAY (CORRIGIDA A BAGUNÇA DE SOBREPOSIÇÃO) */
.projects .portfolio-content { 
    position: relative; 
    overflow: hidden; 
    border-radius: 8px; 
}
.projects .portfolio-content img { 
    transition: 0.3s; 
}
.projects .portfolio-content .portfolio-info { 
    opacity: 0; 
    position: absolute; 
    inset: 0; 
    z-index: 3; 
    transition: all ease-in-out 0.3s; 
    background: rgba(0, 0, 0, 0.75); 
}

/* Travando os textos no topo e embaixo para não bater nos ícones do meio */
.projects .portfolio-content .portfolio-info h4 { 
    position: absolute;
    top: 25px;
    left: 15px;
    right: 15px;
    font-size: 16px; 
    font-weight: 700; 
    color: #fff; 
    text-align: center;
    margin: 0;
}
.projects .portfolio-content .portfolio-info p { 
    position: absolute;
    bottom: 25px;
    left: 15px;
    right: 15px;
    text-align: center; 
    font-size: 14px; 
    font-weight: 500; 
    color: rgba(255, 255, 255, 0.9); 
    margin: 0;
}

/* Ícones de Zoom e Link (Centralizados perfeitamente na imagem) */
.projects .portfolio-content .portfolio-info .preview-link,
.projects .portfolio-content .portfolio-info .details-link { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px; 
    color: #fff; 
    transition: 0.3s; 
    line-height: 1; 
}
.projects .portfolio-content .portfolio-info .preview-link {
    right: 52%; /* Empurra um pouco pra esquerda do centro */
}
.projects .portfolio-content .portfolio-info .details-link {
    left: 52%; /* Empurra um pouco pra direita do centro */
}

.projects .portfolio-content .portfolio-info .preview-link:hover,
.projects .portfolio-content .portfolio-info .details-link:hover { 
    color: #007FFF; 
}

/* Animações Hover Finais */
.projects .portfolio-content:hover .portfolio-info { 
    opacity: 1; 
}
.projects .portfolio-content:hover img { 
    transform: scale(1.1); 
}


/* ==========================================================================
   6 SEÇÃO: RESPONSIVIDADE GLOBAL E MOBILE
   ========================================================================== */

/* 6/1 AJUSTES PARA TABLETS E CELULARES */
@media (max-width: 991px) {
    .content-box { text-align: center; padding-left: 0; }
    .jn-card-mini { justify-content: center; text-align: left; }
    .btn-jn-premium { width: 100%; justify-content: center; }
    .arch-content { text-align: center; }
    .jn-check-list-arch li { justify-content: center; text-align: left; }
    .btn-arch-premium { width: 100%; justify-content: center; }
}

@media (max-width: 575px) {
    .projects .portfolio-flters li { 
        font-size: 15px; 
        margin: 0 5px 10px 5px; 
    }
}