/* ============================================================
   mb.css - ajustes da marca MB Grafica sobre o tema base.
   Cor primaria #007ac1 (azul), secundaria #00a651 (verde), base branco.
   ============================================================ */
:root{
  --mb-azul:#007ac1;
  --mb-azul-esc:#0067a3;
  --mb-verde:#00a651;
}

/* --- topbar --- */
.bgc-blue{ background:var(--mb-azul); }
/* alinha "Gráfica em Osasco há 30 anos" com a logo do menu (nudge p/ direita) */
.navbar-top .topbar-left{ padding-left:14px; }
.navbar-top.style-one .topbar-left span{ position:relative; margin-right:22px; }
.navbar-top.style-one .topbar-left span+span::before{ content:"\f111"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:5px; vertical-align:middle; margin-right:10px; opacity:.7; }
.navbar-top .topbar-right a{ color:#fff; }
.navbar-top .social-style-one a{ color:#fff; }

/* --- logo / brand lockup --- */
.mb-brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.mb-brand img{ height:48px; width:auto; display:block; }
.mb-brand__name{ font-size:24px; font-weight:600; line-height:1; color:#0b2230; letter-spacing:.2px; }
.mb-brand__name strong{ color:var(--mb-azul); font-weight:800; }
.mb-brand--footer .mb-brand__name{ color:#fff; }
.mb-brand--footer .mb-brand__name strong{ color:#fff; }

/* --- lista de orcamento (cart) no header --- */
.nav-right-part.nav-right-part-desktop{ display:flex; align-items:center; gap:18px; }
.mb-cart{ position:relative; font-size:20px; color:#0b2230; }
.mb-cart:hover{ color:var(--mb-azul); }
.mb-cart__badge{ position:absolute; top:-10px; right:-12px; min-width:18px; height:18px; padding:0 5px;
  background:var(--mb-verde); color:#fff; font-size:11px; font-weight:700; line-height:18px;
  text-align:center; border-radius:9px; }

/* --- WhatsApp flutuante --- */
.whats-float{ position:fixed; right:22px; bottom:22px; z-index:999; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff;
  font-size:30px; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .2s; }
.whats-float:hover{ color:#fff; transform:translateY(-3px); }

/* --- selos sob o hero (numeros de confianca) --- */
.mb-selos{ display:flex; flex-wrap:wrap; gap:30px; }
.mb-selos .item{ }
.mb-selos .num{ font-size:30px; font-weight:800; color:var(--mb-azul); line-height:1; }
.mb-selos .rot{ display:block; font-size:14px; color:#5b6b75; margin-top:4px; }

/* --- preco consultivo (pagina de produto) --- */
.mb-preco-consultivo{ font-size:22px; font-weight:700; color:var(--mb-verde); }
.mb-badges .badge{ display:inline-block; background:var(--mb-azul); color:#fff; font-size:12px;
  font-weight:600; padding:4px 12px; border-radius:20px; margin:0 6px 6px 0; }
.mb-badges .badge.fsc{ background:var(--mb-verde); }

/* --- specs (tabela) --- */
.mb-specs{ width:100%; border-collapse:collapse; }
.mb-specs th,.mb-specs td{ padding:12px 14px; border-bottom:1px solid #e9eef2; text-align:left; font-size:15px; }
.mb-specs th{ width:42%; color:#0b2230; font-weight:600; background:#f1f7fb; }

/* --- card de produto: botao adicionar ao orcamento --- */
.product-item .mb-add{ display:block; width:100%; margin-top:12px; border:0; background:var(--mb-azul);
  color:#fff; font-weight:600; padding:10px; border-radius:6px; cursor:pointer; transition:background .2s; }
.product-item .mb-add:hover{ background:var(--mb-azul-esc); }
.product-item .price.sob{ font-size:15px; color:var(--mb-verde); font-weight:700; }

/* --- passos (como funciona) --- */
.mb-passos{ counter-reset:passo; }
.mb-passo{ position:relative; padding:28px 24px 24px; background:#fff; border:1px solid #e9eef2;
  border-radius:10px; height:100%; }
.mb-passo::before{ counter-increment:passo; content:counter(passo); display:flex; align-items:center;
  justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--mb-azul);
  color:#fff; font-weight:800; margin-bottom:14px; }
.mb-passo h5{ margin-bottom:8px; }

/* --- blog: TL;DR e FAQ --- */
.mb-tldr{ background:#f1f7fb; border-left:4px solid var(--mb-azul); padding:18px 22px; border-radius:8px; margin-bottom:30px; }
.mb-tldr strong{ color:var(--mb-azul); }
.mb-article-body h2{ margin-top:34px; }
.mb-article-body table{ width:100%; border-collapse:collapse; margin:18px 0; }
.mb-article-body th,.mb-article-body td{ padding:11px 14px; border:1px solid #e9eef2; text-align:left; }
.mb-article-body th{ background:#f1f7fb; }
.mb-article-body ul,.mb-article-body ol{ padding-left:22px; margin:14px 0; }
.mb-article-body li{ margin-bottom:8px; }
.mb-faq .item{ border:1px solid #e9eef2; border-radius:8px; padding:18px 22px; margin-bottom:14px; }
.mb-faq h5{ margin:0 0 8px; font-size:17px; }

/* --- lista de orcamento (pagina) --- */
.mb-orc-item{ display:flex; align-items:center; gap:16px; padding:16px; border:1px solid #e9eef2; border-radius:10px; margin-bottom:14px; }
.mb-orc-item img{ width:72px; height:72px; object-fit:cover; border-radius:8px; }
.mb-orc-item .rm{ margin-left:auto; background:none; border:0; color:#c0392b; cursor:pointer; font-size:20px; }
.mb-orc-vazio{ text-align:center; padding:50px 20px; color:#5b6b75; }

/* --- HEADER: navbar branca fixa (sticky) o tempo todo --------------------
   O tema deixa a .navbar-area "position:absolute" sobre o banner (causava
   o menu em cima do azul). Aqui ela vira uma barra branca fixa no topo, igual
   ao estado "sticky" que aparecia ao rolar. */
.mb-fixed-header{ position:fixed; top:0; left:0; width:100%; z-index:999; transition:transform .35s ease; }
.mb-fixed-header.nav-hidden{ transform:translateY(-100%); }
.navbar.style-one.navbar-area{ position:static !important; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.07); }
.navbar.style-one.navbar-area.sticky-active{ -webkit-animation:none !important; animation:none !important; box-shadow:0 4px 18px rgba(0,0,0,.07); }
.navbar-area .navbar-nav li a{ color:#0b2230; }
/* o banner azul das paginas internas comeca limpo, abaixo da navbar */
.page-banner{ background:var(--mb-azul); }
.page-banner .page-title{ text-transform:none; }
/* hero da home: sem o vao gigante que o tema reservava p/ navbar absoluta */
.hero-area.pt-145{ padding-top:70px; }

/* --- diversos --- */
.section-title .sub-title{ color:var(--mb-azul); }
.mb-mapa iframe{ width:100%; min-height:320px; border:0; border-radius:10px; }
.text-green{ color:var(--mb-verde); }

/* ============================================================
   CORREÇÕES (lote 24/06) — header, banner, cards, FAQ, rodapé, modal
   ============================================================ */

/* [1] navbar some/volta: a regra está em .mb-fixed-header (header fixo) acima */

/* [2] logo do menu maior e sem achatar */
.navbar-area .logo{ max-width:none; }
.mb-brand img{ height:56px; width:56px; object-fit:contain; }
.mb-brand__name{ font-size:26px; white-space:nowrap; }

/* [14] ícone do WhatsApp no topo (estilizado no header.php) */
.navbar-top .topbar-right .fa-whatsapp{ color:#25d366; }

/* [18] banner azul das páginas internas: full-width (tema punha margem em telas grandes) */
.page-banner{ margin-left:0 !important; margin-right:0 !important; }
.page-banner::before{ display:none !important; }

/* [5][12][17] padronizar ALTURA dos cards (vitrine, catálogo, blog).
   A row do Bootstrap é flex: as colunas já esticam igual; o card preenche com height:100%. */
.product-item{ height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid #e9eef2; border-radius:12px; overflow:hidden; }
.product-item .image{ flex:0 0 auto; }
.product-item .image img{ width:100%; height:210px; object-fit:cover; }
.product-item .content{ flex:1 1 auto; display:flex; flex-direction:column; padding:18px 20px; }
.product-item .mb-card-specs{ font-size:14px; color:#5b6b75; }
.product-item .mb-add{ margin-top:auto; white-space:nowrap; font-size:14px; }
.blog-item{ height:100%; display:flex; flex-direction:column; }
.blog-item .content{ flex:1 1 auto; display:flex; flex-direction:column; }
.blog-item .content h4{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-item .content p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.blog-item .content .read-more{ margin-top:auto; }

/* [4][7] centralização de seções */
.mb-center .service-item,
.mb-center .mb-passo{ text-align:center; }
.mb-center .service-item .icon,
.mb-center .mb-passo::before{ margin-left:auto; margin-right:auto; }
.cta-area .cta-content{ text-align:center; margin:0 auto; }

/* [13] botão "Adicionar ao orçamento" em uma linha */
.mb-add i{ margin-right:4px; }

/* [6] FAQ acordeão: fechado; hover abre no desktop, clique no mobile */
.mb-faq .item{ cursor:pointer; transition:border-color .2s; }
.mb-faq .item > h5{ margin:0; position:relative; padding-right:30px; }
.mb-faq .item > h5::after{ content:"\f078"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:13px; color:var(--mb-azul); position:absolute; right:2px; top:2px; transition:transform .3s; }
.mb-faq .item > p{ max-height:0; overflow:hidden; margin:0; opacity:0; transition:max-height .35s ease, opacity .3s, margin .3s; }
.mb-faq .item.aberto{ border-color:var(--mb-azul); }
.mb-faq .item.aberto > p{ max-height:500px; opacity:1; margin-top:10px; }
.mb-faq .item.aberto > h5::after{ transform:rotate(180deg); }
@media (hover:hover) and (min-width:768px){
  .mb-faq .item:hover{ border-color:var(--mb-azul); }
  .mb-faq .item:hover > p{ max-height:500px; opacity:1; margin-top:10px; }
  .mb-faq .item:hover > h5::after{ transform:rotate(180deg); }
}

/* sumário (índice) do artigo do blog */
.mb-sumario{ background:#f1f7fb; border:1px solid #e1edf5; border-radius:10px; padding:18px 22px; margin-bottom:28px; }
.mb-sumario strong{ display:block; margin-bottom:8px; color:#0b2230; }
.mb-sumario ul{ margin:0; padding-left:18px; }
.mb-sumario li{ margin-bottom:6px; }
.mb-sumario a{ color:var(--mb-azul); }

/* depoimentos (não confundir com o acordeão de FAQ) */
.mb-depo{ border:1px solid #e9eef2; border-radius:10px; padding:22px; height:100%; background:#fff; }

/* [8][9] rodapé: logo (só o símbolo) maior e centralizada + links em 1 linha */
.footer-area .footer-logo{ display:flex !important; justify-content:center !important; }
.mb-brand--footer{ justify-content:center; }
.mb-brand--footer .mb-brand__name{ display:none; } /* no rodapé mostra só o símbolo */
.mb-brand--footer img{ height:92px !important; width:92px !important; }
.footer-area .widget_about{ text-align:center; }
.footer-area .widget_about .social-style-two{ justify-content:center; display:flex; gap:12px; }
.footer-area .widget_nav_menu li a{ white-space:nowrap; }

/* [11] subrodapé em 3 linhas centralizadas */
.mb-subrodape{ text-align:center; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); }
.mb-subrodape p{ margin:2px 0; font-size:14px; }

/* [16] modal de qualificação (Nome + WhatsApp) */
.mb-modal[hidden]{ display:none; }
.mb-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:18px; }
.mb-modal__bg{ position:absolute; inset:0; background:rgba(8,20,30,.6); }
.mb-modal__box{ position:relative; background:#fff; border-radius:14px; padding:32px 28px; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center; }
.mb-modal__x{ position:absolute; top:12px; right:16px; border:0; background:none; font-size:26px; line-height:1; color:#9aa7b1; cursor:pointer; }
.mb-modal__ico{ width:60px; height:60px; border-radius:50%; background:#25d366; color:#fff; font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.mb-modal__box h3{ margin:0 0 6px; }
.mb-modal__box p{ color:#5b6b75; margin:0 0 18px; font-size:15px; }
.mb-modal__box input{ width:100%; padding:12px 14px; border:1px solid #d7e0e6; border-radius:8px; margin-bottom:12px; font-size:15px; }
.mb-modal__box .theme-btn{ width:100%; justify-content:center; border:0; cursor:pointer; }

/* cookie banner (LGPD) */
.mb-cookies[hidden]{ display:none; }
.mb-cookies{ position:fixed; left:18px; right:18px; bottom:18px; z-index:1000; max-width:560px; margin:0 auto;
  background:#0f1b24; color:#e7eef3; border-radius:14px; padding:18px 22px; box-shadow:0 16px 50px rgba(0,0,0,.35);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.mb-cookies p{ margin:0; flex:1 1 280px; font-size:14px; line-height:1.5; }
.mb-cookies a{ color:#7fc4dd; text-decoration:underline; }
.mb-cookies__acoes{ display:flex; gap:10px; }
.mb-cookies__btn{ border:0; cursor:pointer; border-radius:8px; padding:10px 18px; font-weight:700; font-size:14px; background:var(--mb-verde); color:#fff; }
.mb-cookies__btn--sec{ background:transparent; color:#cdd8e0; border:1px solid rgba(255,255,255,.25); }

/* ============================================================
   CORREÇÕES (lote 2) — preço, hover, rodapé, CTA, degradê
   ============================================================ */

/* preço consultivo: tira o "$" do tema e mantém "Sob orçamento" em 1 linha */
.product-item .content .title-price{ display:block; }
.product-item .content .title-price .price:before{ content:"" !important; display:none !important; }
.product-item .price.sob{ white-space:nowrap; margin-top:4px; }

/* hover dos cards .service-item: fundo azul + texto branco (era branco no claro = ilegível) */
.service-item{ transition:.4s ease; }
.service-item:hover{ background:var(--mb-azul) !important; }
.service-item:hover h3, .service-item:hover h3 a,
.service-item:hover h4, .service-item:hover h4 a,
.service-item:hover p, .service-item:hover .read-more, .service-item:hover .read-more i{ color:#fff !important; }
.service-item:hover .icon, .service-item:hover .icon i{ color:#fff !important; -webkit-text-fill-color:#fff; }

/* CTA "Não achou o que procura": tema limitava a 400px -> centraliza e alarga */
.cta-area .cta-content{ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; }

/* RODAPÉ: tema punha 2 colunas (width:50%) e fonte "FA Pro" inexistente */
.footer-area .widget_nav_menu ul{ display:block !important; }
.footer-area .widget_nav_menu ul li{ width:100% !important; }
.footer-area .widget_nav_menu ul li a{ white-space:nowrap; }
.footer-area .widget_nav_menu ul li a:before{ font-family:"Font Awesome 5 Pro" !important; font-weight:900; color:var(--mb-azul); }
/* contato: ícone + texto alinhados (evita sobreposição do endereço) */
.footer-area .widget_contact_info ul li{ display:flex; align-items:flex-start; gap:9px; margin-bottom:10px; }
.footer-area .widget_contact_info ul li i{ margin-top:6px; color:var(--mb-azul); }

/* linha em degradê da marca entre rodapé e subrodapé + destaque do Gê Carvalho */
.mb-subrodape{ border-top:3px solid transparent; border-image:linear-gradient(90deg, var(--mb-azul), var(--mb-verde)) 1; }
.mb-subrodape a[href*="gecarvalho"]{ color:var(--mb-verde); font-weight:700; }
.mb-subrodape a[href*="gecarvalho"]:hover{ color:#fff; }