.elementor-kit-7{--e-global-color-primary:#D8322E;--e-global-color-secondary:#16181B;--e-global-color-text:#474B4F;--e-global-color-accent:#B42724;--e-global-color-fde3857:#E7E8E2;--e-global-color-db89ee7:#F5F6F1;--e-global-color-0516c82:#C4C7BE;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Linha:#C4C7BE; --Papel:#F5F6F1; --Concreto:#E7E8E2; --Vermelho_DFX:#D8322E; --Grafite:#16181B; --Grafite_2:#474B4F; --Vermelho_Escuro:#B42724; }
/* Start custom CSS *//* =============================================================
   DFX ENGENHARIA — CSS complementar do Elementor
   -------------------------------------------------------------
   ONDE COLAR:
   Elementor → Configurações do site → CSS personalizado
   (ou Aparência → Personalizar → CSS adicional)

   COMO USAR:
   Cada bloco abaixo diz qual CLASSE aplicar e em qual elemento.
   No Elementor, selecione o elemento → aba AVANÇADO →
   "Classes CSS" → digite a classe (sem o ponto).
   ============================================================= */

:root{
  --dfx-concrete:#E7E8E2;
  --dfx-concrete-2:#DFE0DA;
  --dfx-paper:#F5F6F1;
  --dfx-ink:#16181B;
  --dfx-ink2:#474B4F;
  --dfx-line:#C4C7BE;
  --dfx-red:#D8322E;
  --dfx-red-dk:#B42724;
}

/* -------------------------------------------------------------
   1. EYEBROW MONO  (o rótulo pequeno com o traço vermelho)
   Aplique em um widget de Texto → classe: dfx-eyebrow
   ------------------------------------------------------------- */
.dfx-eyebrow{
  font-family:'JetBrains Mono',monospace !important;
  font-size:12.5px !important; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dfx-red-dk) !important;
  display:inline-flex; align-items:center; gap:10px;
}
.dfx-eyebrow::before{content:""; width:26px; height:1px; background:var(--dfx-red);}

/* -------------------------------------------------------------
   2. GRID DE PRANCHA (fundo quadriculado do herói)
   Aplique na SEÇÃO do herói → classe: dfx-grid
   ------------------------------------------------------------- */
.dfx-grid{position:relative;}
.dfx-grid::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--dfx-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--dfx-line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 25%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 25%,#000,transparent 75%);
}
.dfx-grid > .elementor-container{position:relative; z-index:1;}

/* -------------------------------------------------------------
   3. RÓTULO DE SEÇÃO  ("01  Escopo de serviços")
   No número use um Texto → classe: dfx-num
   ------------------------------------------------------------- */
.dfx-num{
  font-family:'JetBrains Mono',monospace !important;
  font-size:13px !important; font-weight:700; color:var(--dfx-red-dk) !important;
  letter-spacing:.05em;
}

/* -------------------------------------------------------------
   4. CÓDIGO DE SERVIÇO  ("S.01 · REF-RES")
   Widget de Texto → classe: dfx-code
   ------------------------------------------------------------- */
.dfx-code{
  font-family:'JetBrains Mono',monospace !important;
  font-size:12px !important; letter-spacing:.14em; font-weight:700;
  color:var(--dfx-red-dk) !important;
}

/* -------------------------------------------------------------
   5. LISTA "INCLUI"  (itens com [v] em mono)
   Melhor via widget HTML com <ul class="dfx-inclui"> (ver arquivo de blocos)
   ------------------------------------------------------------- */
.dfx-inclui{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:9px 22px;}
.dfx-inclui li{font-size:14.5px; color:var(--dfx-ink2);
  display:flex; gap:9px; align-items:flex-start;}
.dfx-inclui li::before{content:"[✓]"; font-family:'JetBrains Mono',monospace;
  font-size:12px; color:var(--dfx-red-dk); font-weight:700; flex-shrink:0;}
@media(max-width:620px){ .dfx-inclui{grid-template-columns:1fr;} }

/* -------------------------------------------------------------
   6. LINHA DE SERVIÇO — marca vermelha ao passar o mouse
   Aplique na SEÇÃO de cada serviço → classe: dfx-svc-row
   ------------------------------------------------------------- */
.dfx-svc-row{position:relative; transition:.2s;}
.dfx-svc-row::before{content:""; position:absolute; left:-24px; top:38px;
  width:3px; height:0; background:var(--dfx-red); transition:.25s;}
.dfx-svc-row:hover::before{height:54px;}

/* -------------------------------------------------------------
   7. BOTÃO — leve elevação no hover (opcional)
   Aplique no botão → classe: dfx-btn
   ------------------------------------------------------------- */
.dfx-btn .elementor-button{transition:.18s ease; border-radius:3px;}
.dfx-btn .elementor-button:hover{transform:translateY(-1px);}

/* -------------------------------------------------------------
   8. CARIMBOS (Ficha Técnica / Índice) e FAQ
   Vêm prontos no arquivo de blocos HTML. Estilos abaixo dão suporte.
   ------------------------------------------------------------- */
.dfx-titleblock{border:1.5px solid var(--dfx-ink); background:rgba(245,246,241,.6);
  font-family:'JetBrains Mono',monospace; font-size:12px;}
.dfx-titleblock .h{background:var(--dfx-ink); color:var(--dfx-concrete); padding:10px;
  letter-spacing:.16em; display:flex; justify-content:space-between; font-weight:700;}
.dfx-titleblock .r{display:grid; grid-template-columns:92px 1fr; border-bottom:1px solid var(--dfx-line);}
.dfx-titleblock .r:last-child{border-bottom:0;}
.dfx-titleblock .k{padding:9px 10px; color:var(--dfx-ink2); border-right:1px solid var(--dfx-line); letter-spacing:.06em;}
.dfx-titleblock .v{padding:9px 10px; font-weight:700; color:var(--dfx-ink);}
.dfx-titleblock a.r{color:var(--dfx-ink); text-decoration:none; transition:.15s;}
.dfx-titleblock a.r:hover{background:#fff;}

/* FAQ em <details> — bloco HTML com <div class="dfx-faq"> */
.dfx-faq details{border-bottom:1px solid var(--dfx-line);}
.dfx-faq summary{list-style:none; cursor:pointer; padding:22px 0; display:flex;
  justify-content:space-between; gap:20px; align-items:center;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--dfx-ink);}
.dfx-faq summary::-webkit-details-marker{display:none;}
.dfx-faq summary .q{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dfx-red-dk); font-weight:700; margin-right:14px;}
.dfx-faq summary .pm{font-family:'JetBrains Mono',monospace; font-size:22px; color:var(--dfx-red-dk); transition:.2s; flex-shrink:0;}
.dfx-faq details[open] summary .pm{transform:rotate(45deg);}
.dfx-faq .a{padding:0 36px 24px 0; color:var(--dfx-ink2); font-size:16px; max-width:760px;}

/* -------------------------------------------------------------
   9. UTIL — texto grafite secundário e faixa escura
   ------------------------------------------------------------- */
.dfx-muted{color:var(--dfx-ink2) !important;}
.dfx-dark{background:var(--dfx-ink) !important; color:var(--dfx-concrete) !important;}
.dfx-dark .dfx-num{color:var(--dfx-red) !important;}

.dfx-obra-img img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}/* End custom CSS */