/* =========================================================
   ESTILO DO SITE - JBR CONSTRUTORA 2026
   Cores: Azul Claro, Azul, Verde Aqua e Branco
   Fonte: Franklin Gothic Book
   ========================================================= */

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: "Franklin Gothic Book", "Franklin Gothic", Arial, sans-serif;
    background:#ffffff;
    color:#2c3e50;
    line-height:1.6;
}

a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------- CORES ----------
   Azul Escuro: #0a3d7c
   Azul:       #0a74da
   Azul Claro: #5dade2 / #aed6f1
   Verde Aqua: #16a085
   Branco:     #ffffff
------------------------------ */

/* ================= TOP BAR (superior ao menu) ================= */
.topbar {
    background:#0a3d7c;
    color:#fff;
    font-size:14px;
    padding:8px 0;
}
.topbar .container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}
.topbar-contato span { margin-right:25px; }
.topbar-contato a { color:#aed6f1; transition:color .3s; }
.topbar-contato a:hover { color:#5dade2; }
.topbar-social a {
    display:inline-block;
    width:30px; height:30px;
    background:#5dade2;
    color:#0a3d7c;
    text-align:center;
    line-height:30px;
    border-radius:50%;
    margin-left:8px;
    font-weight:bold;
    transition:all .3s;
}
.topbar-social a:hover { background:#16a085; color:#fff; }

/* ================= HEADER / MENU ================= */
header {
    background:#ffffff;
    box-shadow:0 2px 10px rgba(10,61,124,.15);
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:4px solid #5dade2;
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
}
.logo { max-height:80px; }

/* Menu horizontal */
nav.menu ul {
    list-style:none;
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
nav.menu ul li a {
    display:block;
    padding:12px 18px;
    background:#0a3d7c;          /* Azul escuro */
    color:#ffffff;               /* Fonte branca */
    font-weight:bold;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:1px;
    border-radius:6px 6px 0 0;
    border-bottom:3px solid #5dade2; /* Detalhe azul claro */
    transition:all .3s;
}
nav.menu ul li a:hover,
nav.menu ul li a.ativo {
    background:#0a74da;          /* Azul */
    border-bottom:3px solid #16a085; /* Detalhe verde aqua */
    transform:translateY(-2px);
}

/* ================= SLIDER ================= */
.slider {
    position:relative;
    width:100%;
    height:480px;
    overflow:hidden;
    background:#0a3d7c;
}
.slide {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    opacity:0;
    transition:opacity 1s ease;
    background-size:cover;
    background-position:center;
}
.slide.ativo { opacity:1; }
.slide::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to right, rgba(10,61,124,.7), rgba(22,160,133,.25));
}
.slide-texto {
    position:absolute;
    left:10%;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    z-index:2;
    max-width:550px;
}
.slide-texto h2 {
    font-size:42px;
    text-transform:uppercase;
    margin-bottom:15px;
    text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.slide-texto p { font-size:18px; margin-bottom:25px; }
.btn-orcamento {
    display:inline-block;
    padding:14px 35px;
    background:#16a085;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    border-radius:50px;
    letter-spacing:1px;
    box-shadow:0 4px 15px rgba(22,160,133,.4);
    transition:all .3s;
    border:none;
    cursor:pointer;
    font-size:15px;
}
.btn-orcamento:hover {
    background:#0a74da;
    transform:scale(1.05);
}
.slider-nav {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    gap:10px;
}
.slider-nav span {
    width:14px; height:14px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    cursor:pointer;
    transition:all .3s;
}
.slider-nav span.ativo { background:#16a085; width:35px; border-radius:7px; }

/* ================= SECAO SOBRE (Home) ================= */
.secao { padding:70px 0; }
.secao-clara { background:#f0f7ff; }
.secao-titulo {
    text-align:center;
    font-size:34px;
    text-transform:uppercase;
    color:#0a3d7c;
    margin-bottom:10px;
}
.secao-titulo::after {
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:#16a085;
    margin:12px auto 0;
    border-radius:2px;
}
.secao-subtitulo { text-align:center; color:#7f8c8d; margin-bottom:45px; }

.sobre-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}
.sobre-foto img {
    border-radius:10px;
    box-shadow:0 10px 30px rgba(10,61,124,.25);
    border-left:6px solid #5dade2;
}
.sobre-texto h3 {
    color:#0a74da;
    font-size:28px;
    text-transform:uppercase;
    margin-bottom:20px;
}
.sobre-texto p { font-size:17px; margin-bottom:15px; color:#34495e; }

/* ================= PORTFOLIO / GALERIA ================= */
.galeria-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:15px;
}
.galeria-item {
    position:relative;
    overflow:hidden;
    border-radius:8px;
    height:200px;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.galeria-item img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .5s;
}
.galeria-item:hover img { transform:scale(1.1); }
.galeria-item .legenda {
    position:absolute;
    bottom:0; left:0; right:0;
    background:linear-gradient(to top, rgba(10,61,124,.9), transparent);
    color:#fff;
    padding:25px 12px 10px;
    font-weight:bold;
    font-size:14px;
}

/* ================= VIDEOS ================= */
.videos-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}
.video-card {
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(10,61,124,.15);
    border-top:4px solid #16a085;
}
.video-card iframe, .video-card video {
    width:100%;
    height:180px;
    border:none;
    background:#000;
}
.video-card h4 {
    padding:12px;
    color:#0a3d7c;
    font-size:15px;
    text-align:center;
}

/* ================= PAGINA INTERNA ================= */
.banner-interno {
    background:linear-gradient(135deg, #0a3d7c, #0a74da);
    color:#fff;
    padding:50px 0;
    text-align:center;
}
.banner-interno h1 {
    font-size:36px;
    text-transform:uppercase;
    letter-spacing:2px;
}
.banner-interno p { color:#aed6f1; margin-top:8px; }

/* Servicos grid */
.servicos-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
}
.servico-card {
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(10,61,124,.12);
    transition:transform .3s, box-shadow .3s;
    border-bottom:4px solid #5dade2;
}
.servico-card:hover { transform:translateY(-8px); box-shadow:0 12px 30px rgba(10,61,124,.25); }
.servico-card img { width:100%; height:220px; object-fit:cover; }
.servico-card h3 {
    padding:18px;
    text-align:center;
    color:#0a3d7c;
    text-transform:uppercase;
    font-size:17px;
}

/* Projetos grid */
.projetos-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
}
.projeto-card {
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(10,61,124,.12);
    transition:transform .3s;
}
.projeto-card:hover { transform:translateY(-5px); }
.projeto-card img { width:100%; height:220px; object-fit:cover; cursor:pointer; }
.projeto-info { padding:18px; }
.projeto-info h3 { color:#0a3d7c; font-size:18px; margin-bottom:8px; }
.projeto-info p { color:#7f8c8d; font-size:14px; margin-bottom:5px; }
.status-badge {
    display:inline-block;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
    color:#fff;
    margin-bottom:10px;
}
.status-concluido { background:#16a085; }
.status-andamento { background:#f39c12; }
.btn-detalhe {
    display:block;
    text-align:center;
    padding:10px;
    background:#0a74da;
    color:#fff;
    border-radius:6px;
    font-weight:bold;
    margin-top:10px;
    transition:background .3s;
}
.btn-detalhe:hover { background:#0a3d7c; }

/* Detalhe do projeto - slider horizontal de fotos */
.detalhe-fotos {
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:15px 0;
    scroll-behavior:smooth;
}
.detalhe-fotos img {
    flex:0 0 auto;
    width:320px;
    height:220px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    border:3px solid #5dade2;
    transition:border-color .3s;
}
.detalhe-fotos img:hover { border-color:#16a085; }

/* Lightbox */
.lightbox {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    z-index:1000;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}
.lightbox.ativo { display:flex; }
.lightbox img { max-width:90%; max-height:90%; border-radius:6px; }
.lightbox-fechar {
    position:absolute;
    top:20px; right:30px;
    color:#fff;
    font-size:40px;
    font-weight:bold;
}

/* ================= FORMULARIOS ================= */
.form-box {
    max-width:700px;
    margin:0 auto;
    background:#fff;
    padding:40px;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(10,61,124,.15);
    border-top:6px solid #0a74da;
}
.form-group { margin-bottom:20px; }
.form-group label {
    display:block;
    margin-bottom:6px;
    color:#0a3d7c;
    font-weight:bold;
    font-size:14px;
    text-transform:uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    padding:12px 15px;
    border:2px solid #aed6f1;
    border-radius:6px;
    font-size:15px;
    font-family:inherit;
    transition:border-color .3s;
    background:#f8fbff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none;
    border-color:#16a085;
    background:#fff;
}
.btn-enviar {
    width:100%;
    padding:15px;
    background:#16a085;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:2px;
    cursor:pointer;
    transition:background .3s;
}
.btn-enviar:hover { background:#0a74da; }
.mensagem-sucesso {
    background:#16a085;
    color:#fff;
    padding:15px;
    border-radius:6px;
    margin-bottom:20px;
    text-align:center;
    font-weight:bold;
}
.mensagem-erro {
    background:#c0392b;
    color:#fff;
    padding:15px;
    border-radius:6px;
    margin-bottom:20px;
    text-align:center;
    font-weight:bold;
}

/* ================= QUEM SOMOS ================= */
.quemsomos-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
}
.quemsomos-foto img {
    border-radius:10px;
    box-shadow:0 10px 30px rgba(10,61,124,.25);
    border-right:6px solid #16a085;
}
.especialidades {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
    margin-top:25px;
}
.especialidade-item {
    background:#f0f7ff;
    padding:15px;
    border-radius:8px;
    border-left:4px solid #16a085;
    font-weight:bold;
    color:#0a3d7c;
}
.marcas {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}
.marca-item {
    background:#0a3d7c;
    color:#fff;
    padding:10px 20px;
    border-radius:30px;
    font-size:14px;
}

/* ================= WHATSAPP FLUTUANTE ================= */
.whatsapp-flutuante {
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:999;
    width:60px;
    height:60px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 15px rgba(37,211,102,.5);
    animation:pulse 2s infinite;
    transition:transform .3s;
}
.whatsapp-flutuante:hover { transform:scale(1.15); }
.whatsapp-flutuante svg { width:34px; height:34px; fill:#fff; }
@keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(37,211,102,.6); }
    70% { box-shadow:0 0 0 18px rgba(37,211,102,0); }
    100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ================= RODAPE ================= */
footer {
    background:#0a3d7c;
    color:#fff;
    padding:50px 0 0;
    margin-top:60px;
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:30px;
    padding-bottom:40px;
}
.footer-col h4 {
    color:#5dade2;
    text-transform:uppercase;
    margin-bottom:18px;
    font-size:16px;
    border-bottom:2px solid #16a085;
    padding-bottom:8px;
    display:inline-block;
}
.footer-col p, .footer-col a { color:#ecf0f1; font-size:14px; line-height:2; }
.footer-col a:hover { color:#16a085; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li::before { content:"▸ "; color:#16a085; }
.footer-social a {
    display:inline-block;
    width:36px; height:36px;
    background:#5dade2;
    color:#0a3d7c;
    text-align:center;
    line-height:36px;
    border-radius:50%;
    margin-right:8px;
    font-weight:bold;
}
.footer-social a:hover { background:#16a085; color:#fff; }
.copyright {
    background:#072a58;
    text-align:center;
    padding:18px 0;
    font-size:14px;
    color:#aed6f1;
    border-top:3px solid #16a085;
}

/* ================= PAINEL ADMIN ================= */
.admin-body { background:#ecf0f1; }
.admin-header {
    background:#0a3d7c;
    color:#fff;
    padding:15px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.admin-header h1 { font-size:22px; }
.admin-header .admin-user { font-size:14px; color:#aed6f1; }
.admin-header .admin-user a { color:#fff; margin-left:15px; background:#c0392b; padding:6px 14px; border-radius:4px; }
.admin-nav {
    background:#0a74da;
    padding:0;
}
.admin-nav ul {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
}
.admin-nav ul li a {
    display:block;
    padding:14px 22px;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    font-size:13px;
    border-bottom:3px solid transparent;
}
.admin-nav ul li a:hover, .admin-nav ul li a.ativo {
    background:#0a3d7c;
    border-bottom:3px solid #16a085;
}
.admin-conteudo { padding:30px 0; min-height:500px; }
.admin-card {
    background:#fff;
    border-radius:8px;
    padding:25px;
    margin-bottom:25px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.admin-card h2 {
    color:#0a3d7c;
    margin-bottom:20px;
    font-size:22px;
    border-bottom:2px solid #5dade2;
    padding-bottom:10px;
}
table.admin-tabela {
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}
table.admin-tabela th {
    background:#0a3d7c;
    color:#fff;
    padding:10px;
    text-align:left;
    font-size:13px;
    text-transform:uppercase;
}
table.admin-tabela td {
    padding:10px;
    border-bottom:1px solid #ecf0f1;
    font-size:14px;
}
table.admin-tabela tr:hover { background:#f0f7ff; }
table.admin-tabela img { width:60px; height:45px; object-fit:cover; border-radius:4px; }
.btn-acao {
    display:inline-block;
    padding:5px 12px;
    border-radius:4px;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    margin-right:5px;
}
.btn-editar { background:#0a74da; }
.btn-excluir { background:#c0392b; }
.btn-aprovar { background:#16a085; }
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    margin-bottom:25px;
}
.stat-card {
    background:#fff;
    padding:25px;
    border-radius:8px;
    text-align:center;
    border-top:4px solid #0a74da;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.stat-card .num { font-size:36px; font-weight:bold; color:#0a3d7c; }
.stat-card .label { color:#7f8c8d; text-transform:uppercase; font-size:12px; margin-top:5px; }
.stat-card.aqua { border-top-color:#16a085; }
.stat-card.azul-claro { border-top-color:#5dade2; }
.stat-card.laranja { border-top-color:#f39c12; }

/* ================= LOGIN ================= */
.login-box {
    max-width:420px;
    margin:80px auto;
    background:#fff;
    padding:40px;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(10,61,124,.25);
    border-top:6px solid #16a085;
}
.login-box h2 {
    text-align:center;
    color:#0a3d7c;
    margin-bottom:25px;
    text-transform:uppercase;
}
.login-logo { text-align:center; margin-bottom:20px; }
.login-logo img { max-height:90px; margin:0 auto; }

/* ================= RESPONSIVO ================= */
@media (max-width: 900px) {
    .galeria-grid, .videos-grid { grid-template-columns:repeat(2, 1fr); }
    .servicos-grid, .projetos-grid { grid-template-columns:repeat(2, 1fr); }
    .sobre-grid, .quemsomos-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .header-inner { flex-direction:column; gap:15px; }
    nav.menu ul { justify-content:center; }
    .slide-texto h2 { font-size:28px; }
    .slider { height:380px; }
}
@media (max-width: 550px) {
    .galeria-grid, .videos-grid, .servicos-grid, .projetos-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr; }
}