/*
Theme Name: Site Express 1
Theme URI: https://eciladigital.com.br/temas-site-express/
Author: Ecila
Author URI: https://eciladigital.com.br
Description: Este tema é exclusivo da plataforma Ecila.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siteexpressone
*/


/* ===========================================
  VARIÁVEIS CSS - OTIMIZADO
  Neste arquivo você vai encontrar as variáveis do site:
  - Cores
  - Fontes
  - Espaçamentos
  - Bordas
  - Sombras
  - Transições
=========================================== */

:root {
  /* ========================================
     CORES PRINCIPAIS
     ======================================== */
  
  --color-primary: #005eff;              /* Cor principal do site */
  --color-primary-dark: #0048cc;         /* Variação escura da cor principal */
  --color-primary-light: #3380ff;        /* Variação clara da cor principal */
  
  --color-secondary: #ff9b00;            /* Cor secundária do site */
  --color-secondary-dark: #cc7c00;       /* Variação escura da cor secundária */
  --color-secondary-light: #ffb033;      /* Variação clara da cor secundária */
  
  --color-contrast: #ffffff;             /* Cor de contraste */
  
  /* ========================================
     CORES DE TEXTO
     ======================================== */
  
  --color-text: #333333;                 /* Cor do texto padrão */
  --color-heading: #000000;              /* Cor dos títulos */
  
  /* ========================================
     CORES NEUTRAS (CINZAS)
     ======================================== */
  
  --color-white: #ffffff;                /* Branco puro */
  --color-black: #000000;                /* Preto puro */
  --color-gray-50: #f9fafb;              /* Cinza muito claro */
  --color-gray-100: #f4f4f4;             /* Cinza claro */
  --color-gray-200: #eeeeee;             /* Cinza claro médio */
  --color-gray-300: #d1d5db;             /* Cinza médio claro */
  --color-gray-400: #9ca3af;             /* Cinza médio */
  --color-gray-500: #6b7280;             /* Cinza */
  --color-gray-600: #4b5563;             /* Cinza médio escuro */
  --color-gray-700: #374151;             /* Cinza escuro */
  --color-gray-800: #222222;             /* Cinza muito escuro */
  --color-gray-900: #111111;             /* Quase preto */
  
  /* ========================================
     TOPBAR (Barra Superior de Contatos)
     ======================================== */
  
  --topbar-bg: #f4f4f4;                  /* Fundo da barra superior */
  --topbar-text: #111111;                /* Texto da barra superior */
  
  /* ========================================
     HEADER (Cabeçalho)
     ======================================== */
  
  --header-bg: #ffffff;                  /* Fundo do cabeçalho */
  --header-text: #111111;                /* Texto do cabeçalho */
  --header-link-hover: #005eff;          /* Cor dos links no hover */
  --header-btn: #222222;                 /* Fundo do botão redes sociais */
  --header-icon: #ffffff;                /* Cor do ícone redes sociais */
  
  /* ========================================
     BOTÕES
     ======================================== */
  
  --btn-bg: #000000;                     /* Fundo dos botões */
  --btn-text: #ffffff;                   /* Texto dos botões */
  --btn-bg-hover: #ff0000;               /* Fundo dos botões no hover */
  --btn-text-hover: #ffffff;             /* Texto dos botões no hover */
  
  /* ========================================
     BARRA DE TÍTULOS (Páginas Internas)
     ======================================== */
  
  --pagebar-bg: #eeeeee;                 /* Fundo da barra de título */
  --pagebar-text: #111111;               /* Texto da barra de título */
  
  /* ========================================
     FOOTER (Rodapé)
     ======================================== */
  
  --footer-bg: #000000;                  /* Fundo do rodapé */
  --footer-text: #ffffff;                /* Texto do rodapé */
  --footer-btn: #222222;                 /* Fundo do botão redes sociais */
  --footer-icon: #ffffff;                /* Cor do ícone redes sociais */
  
  /* ========================================
     TIPOGRAFIA - FONTES
     ======================================== */
  
  /* Famílias de Fonte */
  --font-primary: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", "Courier New", monospace;
  
  /* Pesos de Fonte */
  --font-weight-light: 300;              /* Leve */
  --font-weight-normal: 400;             /* Normal/Regular */
  --font-weight-medium: 500;             /* Médio */
  --font-weight-semibold: 600;           /* Semi-negrito */
  --font-weight-bold: 700;               /* Negrito */
  --font-weight-extrabold: 800;          /* Extra negrito */
  
  /* ========================================
     TIPOGRAFIA - TAMANHOS DE FONTE (FLUIDOS)
     Responsivos automaticamente
     ======================================== */
  
  --font-size-xs: clamp(0.75rem, 0.9vw, 0.875rem);     /* 12-14px */
  --font-size-sm: clamp(0.875rem, 1vw, 1rem);          /* 14-16px */
  --font-size-base: clamp(1rem, 1.1vw, 1.125rem);      /* 16-18px */
  --font-size-lg: clamp(1.125rem, 1.2vw, 1.25rem);     /* 18-20px */
  --font-size-xl: clamp(1.25rem, 1.5vw, 1.5rem);       /* 20-24px */
  --font-size-2xl: clamp(1.5rem, 2vw, 1.875rem);       /* 24-30px */
  --font-size-3xl: clamp(1.875rem, 2.5vw, 2.25rem);    /* 30-36px */
  --font-size-4xl: clamp(2.25rem, 3vw, 3rem);          /* 36-48px */
  
  /* ========================================
     TIPOGRAFIA - ALTURAS DE LINHA
     ======================================== */
  
  --line-height-tight: 1.25;             /* Apertado - para títulos */
  --line-height-snug: 1.375;             /* Justo */
  --line-height-normal: 1.5;             /* Normal - para textos */
  --line-height-relaxed: 1.625;          /* Relaxado */
  --line-height-loose: 2;                /* Solto - para textos longos */
  
  /* ========================================
     ESPAÇAMENTOS
     Sistema baseado em múltiplos de 4px
     ======================================== */
  
  --space-0: 0;                          /* 0px */
  --space-1: 0.25rem;                    /* 4px */
  --space-2: 0.5rem;                     /* 8px */
  --space-3: 0.75rem;                    /* 12px */
  --space-4: 1rem;                       /* 16px */
  --space-5: 1.25rem;                    /* 20px */
  --space-6: 1.5rem;                     /* 24px */
  --space-7: 1.75rem;                    /* 28px */
  --space-8: 2rem;                       /* 32px */
  --space-10: 2.5rem;                    /* 40px */
  --space-12: 3rem;                      /* 48px */
  --space-15: 3.75rem;                   /* 60px */
  --space-16: 4rem;                      /* 64px */
  --space-20: 5rem;                      /* 80px */
  --space-24: 6rem;                      /* 96px */
  --space-30: 7.5rem;                    /* 120px */
  
  /* ========================================
     BORDAS - RAIOS
     ======================================== */
  
  --radius-none: 0;                      /* Sem arredondamento */
  --radius-sm: 0.25rem;                  /* 4px - Pequeno */
  --radius-md: 0.5rem;                   /* 8px - Médio */
  --radius-lg: 0.75rem;                  /* 12px - Grande */
  --radius-xl: 1rem;                     /* 16px - Extra grande */
  --radius-2xl: 1.25rem;                 /* 20px */
  --radius-3xl: 1.875rem;                /* 30px */
  --radius-full: 9999px;                 /* Totalmente arredondado */
  --radius-circle: 50%;                  /* Circular */
  
  /* Bordas - Espessuras */
  --border-thin: 1px;                    /* Fina */
  --border-medium: 2px;                  /* Média */
  --border-thick: 4px;                   /* Grossa */
  
  /* ========================================
     SOMBRAS
     ======================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);           /* Pequena */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);         /* Média */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);       /* Grande */
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);       /* Extra grande */
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);    /* Gigante */
  --shadow-none: none;                   /* Sem sombra */
  
  /* ========================================
     TRANSIÇÕES
     ======================================== */
  
  --transition-fast: 150ms ease;         /* Rápida */
  --transition-base: 300ms ease;         /* Padrão */
  --transition-slow: 500ms ease;         /* Lenta */
  
  /* Curvas de animação */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ========================================
     Z-INDEX (Camadas)
     ======================================== */
  
  --z-base: 0;                           /* Base */
  --z-dropdown: 1000;                    /* Dropdowns */
  --z-sticky: 1020;                      /* Elementos sticky */
  --z-fixed: 1030;                       /* Elementos fixos */
  --z-modal-backdrop: 1040;              /* Fundo do modal */
  --z-modal: 1050;                       /* Modal */
  --z-popover: 1060;                     /* Popover */
  --z-tooltip: 1070;                     /* Tooltip */
  
  /* ========================================
     LARGURAS MÁXIMAS (Containers)
     ======================================== */
  
  --container-sm: 640px;                 /* Pequeno */
  --container-md: 768px;                 /* Médio */
  --container-lg: 1024px;                /* Grande */
  --container-xl: 1280px;                /* Extra grande (padrão do site) */
  --container-2xl: 1536px;               /* Gigante */
}

/* ===========================================
  RESET CSS OTIMIZADO PARA PERFORMANCE
  - Minimalista: apenas o essencial
  - Seletores específicos (evita * quando possível)
  - Sem redundâncias
  - Otimizado para rendering
  =========================================== */

  /* 1) Box-sizing - Método mais performático */
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit; /* inherit é mais rápido que repetir border-box */
  }

  /* 2) Reset de margens/paddings - Seletores específicos */
  body, h1, h2, h3, h4, h5, h6, p, 
  ul, ol, li, figure, figcaption, 
  blockquote, dl, dd {
    margin: 0;
    padding: 0;
  }

  /* 3) Body - Base otimizada */
  body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 4) Imagens e mídia - Crítico para CLS (Cumulative Layout Shift) */
  img,
  picture,
  video,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* 5) Forms - Reset mínimo necessário */
  input,
  button,
  textarea,
  select {
    font: inherit; /* Mais conciso que font-family + font-size + line-height */
  }

  /* 6) Links - Apenas o essencial */
  a {
    color: inherit;
    text-decoration: none;
  }

  /* 7) Listas */
  ul, ol {
    list-style: none;
  }

  /* 8) Tabelas */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* 9) Acessibilidade - Focus */
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* 10) Reduced motion - Performance + Acessibilidade */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* 11) Utilitários essenciais */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ===========================================
    DEFINIÇÕES CONTRA RESET
    (Específicas do seu tema)
  =========================================== */
  
  .box-conteudo-ctp p { 
    margin-bottom: var(--space-5); 
  }

  .box-conteudo-ctp strong,
  .box-conteudo-ctp b {
    font-weight: 700;
  }

  .box-conteudo-ctp em, 
  .box-conteudo-ctp i {
    font-style: italic;
  }

  .box-conteudo-ctp ul,
  .box-conteudo-ctp ol {
    margin-bottom: 16px;
    padding-left: 24px;
  }

  .box-conteudo-ctp ul {
    list-style: disc;
  }

  .box-conteudo-ctp ol {
    list-style: decimal;
  }

  .box-conteudo-ctp a {
    color: var(--color-primary, #0066cc);
    text-decoration: underline;
  }

  .box-conteudo-ctp h1,
  .box-conteudo-ctp h2,
  .box-conteudo-ctp h3,
  .box-conteudo-ctp h4,
  .box-conteudo-ctp h5,
  .box-conteudo-ctp h6 {
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .titulo-box-conteudo-ctp {
    display: block;
    margin-bottom: var(--space-8) !important; 
  }

/* FIM RESET */


/* ============================================
   LAYOUT
   ============================================ */
   body {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    color: var(--txt);
  }

  .site-main {
    display: flex;
    flex-direction: column;
  }

  .sec-ecila-site {
    padding: var(--space-15) 0;
    transition: order 0.3s ease;
  }

  .sec-ecila-grupo {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .sec-maps {
    background-color: var(--ct);
  }

  .sec-maps iframe {
    height: 450px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--c1);
  }

  .sec-reset-padding {
    padding: var(--space-0);
  }

  .sec-reset-padding-top {
    padding-top: var(--space-0);
  }

  .sec-itens-relacionados,
  .sec-galeria-pagina,
  .sec-descricao-projetos,
  .secao-news,
  .galeria-pagina {
    background-color: var(--ct);
  }

  .sec-404 {
    border-top: 1px solid #eee;
  }

	.sec-barra-conteudo {
		padding: var(--space-12) 0 var(--space-12) 0 !important;
	}

  .conteudo-pagina,
  .galeria-pagina-detalhes-projetos {
    padding-top: var(--space-0);
    margin-top: -60px;
    position: relative;
    z-index: 1;
  }

  .sec-captura-leads-projetos {
    background: var(--ct);
    background: linear-gradient(180deg, var(--ct) 40%, rgba(255, 255, 255, 1) 40%);
    padding-top: var(--space-0);
  }

  .div-overlay {
    background-color: var(--c1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
  }

  .container {
    width: var(--container-xl);
    margin: auto;
    padding: 0 var(--space-5);
  }

  .limite-conteudo-relative {
    position: relative;
  }

  .limite-404 {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20PX;
  }

  .limite-obrigado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 700px;
    text-align: center;
  }
  
  .container__elementos-grupo {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .container__title-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
	  width: 50%;
  }

	.grupo-titulo-subtitulo {
		display: flex;
		flex-direction: column;
		gap: 15px;
  }

	/* Desktop — respeita a coluna configurada pelo admin */
.servicos-grid.colunas-1 { grid-template-columns: 1fr; }
.servicos-grid.colunas-2 { grid-template-columns: repeat(2, 1fr); }
.servicos-grid.colunas-3 { grid-template-columns: repeat(3, 1fr); }
.servicos-grid.colunas-4 { grid-template-columns: repeat(4, 1fr); }
.servicos-grid.colunas-5 { grid-template-columns: repeat(5, 1fr); }
.servicos-grid.colunas-6 { grid-template-columns: repeat(6, 1fr); }

/* Fallback quando nenhuma classe de coluna estiver presente */
.servicos-grid { 
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr); /* padrão */
}

/*
  .servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
    gap: 15px;
  }*/

  .projetos-grid-destaque {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
  }

  .projetos-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

/* FIM */


/* ============================================
   COMPONENTS - BUTTONS
   ============================================ */

  .box-cont-bt {
    display: flex;
  }

  .btn {
    display: flex;
    padding: var(--space-3) var(--space-8);
    background-color: var(--bt-bg);
    color: var(--bt-tx);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-base);
    border: var(--border-thin) solid var(--bt-bg);
    justify-content: center;
    margin: 0;
    cursor: pointer;
  }

  .btn:hover {
    background: var(--bt-bg-h);
    border: 1px solid var(--bt-bg-h);
    color: var(--bt-tx-h);
  }

  .cta-categorias {
    color: var(--bar-txt);
    background-color: transparent;
    border-color: var(--bar-txt);
    font-weight: var(--font-weight-medium);
  }

  .cta-categorias:hover {
    color: var(--bar-txt);
    background-color: transparent;
    border-color: var(--bar-txt);
    opacity: 0.7;
  }

  .titulo-primario {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--ttl);
  }

  .titulo-terceario {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ttl);
  }

  .titulo-sidebar {
    font-size: var(--font-size-base);
    color: var(--ttl);
  }

  .titulo-barra-superio-internas {
    color: var(--bar-txt);
  }


  .titulo-cards-medio {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ttl);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .archive-descricao {
    font-size: var(--font-size-lg);
  }

  /* PAGINAÇÃO */
  .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: var(--space-16);
  }

  .page-numbers {
    padding: var(--space-3) var(--space-5);
    background: #eee;
    color: var(--txt);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    transition: var(--transition-base);
    font-weight: var(--font-weight-medium);
  }

  .page-numbers.current {
    background: var(--c1);
    color: #fff;
    border: 1px solid var(--c1);
    font-weight: var(--font-weight-semibold);
  }

  .page-numbers:hover {
    background: transparent;
    color: var(--c1);
    border: 1px solid var(--c1);
  }

  /* BREADCRUMBS (MIGALHAS DE PÃO) */
  .breadcrumbs {
    margin-bottom: 30px;
  }

  .breadcrumbs-container {
    max-width: 1280px;
    margin: 0 auto;
    font-size: 14px;
  }

  .breadcrumbs a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .breadcrumbs a:hover {
    color: white;
    text-decoration: none;
  }

  .breadcrumb-separator {
    color: #999;
    margin: 0 8px;
  }

  .breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
  }

  .breadcrumb-home {
    font-weight: 500;
  }


/* FIM */

/* ============================================
   COMPONENTS - CARDS
   ============================================ */
  .card-servico,
  .card-projeto,
  .card-post {
    background: rgb(255, 255, 255);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card-post {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  }

  .card-servico:hover,
  .card-projeto:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  }

  .card-imagem {
    display: block;
    position: relative;
    overflow: hidden;
    height: auto;
    border-radius: var(--radius-md);
    background-color: #f0f0f0;
	  /* Reserva espaço com aspect-ratio — elimina o reflow */
    aspect-ratio: 1 / 1;
    width: 100%;
  }

/* Imagem preenche o container reservado */
.card-imagem img,
.card-imagem picture {
    width: 100%;
    height: 100%;
    display: block;
}

.card-imagem img {
    object-fit: cover;
    transition: transform 0.8s ease;
}

  .card-servico:hover .card-imagem img,
  .card-projeto:hover .card-imagem img,
  .card-post:hover .card-imagem img  {
    transform: scale(1.1);
  }

  .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--c2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .card-servico:hover .card-overlay,
  .card-post:hover .card-overlay {
    opacity: 0.3;
  }

  .card-conteudo {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card-titulo {
    font-size: var(--font-size-base);
	  /* Evita reflow quando a fonte web carrega */
    line-height: 1.5;
    min-height: 0;
  }

  .card-titulo a {
    color: var(--ttl);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: color 0.3s;
  }

  .card-titulo a:hover {
    opacity: 0.8;
  } 

  .card-descricao {
    color: var(--txt);
	  /* Evita reflow quando a fonte web carrega */
    line-height: 1.5;
    min-height: 0;
  }

  .form-captura-leads {
    flex: auto;
  }

  .acao-card {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
  }

  .cta-card {
    width: 100%;
  }

  .card-destaque {
    grid-row: span 2;
  }

  .agrupa-info-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .t-projetos {
    width: 80%;
    margin-bottom: 0px !important;
    position: relative;
    z-index: 1;
  }

  .t-projetos a {
    color: white !important;
  }

  .overlay-info-card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--c1);
    opacity: 0.7;
  }

  .agrupa-titulo-card-projetos {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: var(--space-6);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .card-link {
    color: var(--txt);
    text-decoration: none;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-full);
    background-color: #fff;
    transition: 400ms;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-link:hover {
    opacity: 0.6;
  }

  .acao-card-post {
    padding-top: var(--space-5);
    border-top: 1px solid #eee;
  }

  .post-category {
    padding: var(--space-1) var(--space-3);
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #fff;
    color: var(--txt);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }

  .card-link-blog {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .card-link-blog:hover {
    opacity: 0.7;
  }

  .video-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
  }

  .box-titulo-video {
    padding: var(--space-5);
  }

  .links-uteis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,
    minmax(280px, 1fr));
    gap: 20px;
  }

  .link-util-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-4);
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .link-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c2);
    border-radius: var(--radius-lg);
  }

  .link-util-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--c2);
  }

  .link-util-card:hover .link-icon {
    opacity: 0.9;
    transform: scale(1.05);
  }

  .link-util-card:hover .link-arrow svg {
    fill: var(--c2);
  }

  .link-util-card:focus {
    outline: 0px solid transparent;
    outline-offset: 0px;
  }

  .descricao-card-mini {
    font-size: var(--font-size-xs);
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .descricao-card-medio {
    font-size: var(--font-size-xs);
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .arquivo-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  }

  .arquivo-card:hover {
    border: 1px solid var(--c2);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }

  .cta-baixar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
  }

  .cta-baixar:hover svg {
    fill: var(--bt-tx-h) !important;
  }

  .tipo-arquivo {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
  }

  .imagem-bloco-destaque-conteudo {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05);
    display: block;
  }

  /* GALERIA DE FOTOS PADRÃO */
  .galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:20PX;
  }

  .galeria-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .galeria-item:hover {
    transform: scale(1.05);
  }

  .galeria-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
  }

  .galeria-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--c2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .galeria-item:hover .galeria-overlay {
    opacity: 0.3 !important;
  }

  .bt-galeria {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: var(--radius-full);
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Lightbox Galeria de Fotos */
  .lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
  }

  .lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    animation: zoom 0.3s;
    border-radius: var(--radius-lg);
  }

  @keyframes zoom {
    from {
      transform: scale(0.8)
    }

    to {
      transform: scale(1)
    }
  }

  .lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
  }

  .lightbox-close:hover {
    color: #bbb;
  }

  .lightbox-prev,
  .lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    transition: 0.3s;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }

  .lightbox-prev {
    left: 20px;
  }

  .lightbox-next {
    right: 20px;
  }

  .lightbox-prev:hover,
  .lightbox-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 50px;
    font-size: 1.2em;
  }


  /* MODAL CATEGORIAS */
  .modal.ativo {
    display: flex;
  }

  .modal-conteudo-padrao {
    background: white;
    padding: var(--space-10) !important;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    position: relative;
  }

  .modal-header-padrao {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .modal-header h2 {
    color: #333;
  }

  .fechar-modal-padrao {
    position: absolute;
    top: 10px;
    right: 10px;
    transition: 400ms;
  }

  .modal-body {
    color: #555;
    line-height: 1.6;
  }

  .t-modal-orcamento {
    margin-bottom: var(--esp-10);
  }

  /* Overlay */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }

  .modal-overlay.ativo {
    opacity: 1;
    visibility: visible;
  }

  .modal-lateral {
    position: fixed;
    top: 0;
    right: -450px;
    width: 100%;
    max-width: 450px;
    height: 100%;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
  }

  .modal-lateral.ativo {
    right: 0;
  }

  .modal-header {
    padding: var(--space-4);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
  }

  .modal-titulo {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--ttl);
  }

  .btn-fechar {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .btn-fechar:hover {
    background: #ececec;
    color: var(--ttl);
  }

  .btn-fechar svg {
    width: 20px;
    height: 20px;
  }

  .modal-conteudo {
    flex: 1;
    padding: var(--space-4);
    overflow-y: auto;
    color: var(--txt);
    line-height: 1.6;
  }

  .modal-conteudo::-webkit-scrollbar {
    width: 8px;
  }

  .modal-conteudo::-webkit-scrollbar-track {
    background: #f3f4f6;
  }

  .modal-conteudo::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
  }

  .modal-conteudo::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }

  #menu-menu-categorias-servico,
  #menu-menu-categorias-de-projetos,
  #menu-menu-categorias-blog {
    gap: 12px;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
  }

  #menu-menu-categorias-servico a,
  #menu-menu-categorias-de-projetos a,
  #menu-menu-categorias-blog a {
    transition: 300ms;
  }

  #menu-menu-categorias-servico a:hover,
  #menu-menu-categorias-de-projetos a:hover,
  #menu-menu-categorias-blog a:hover {
    opacity: 0.7;
  }

  .sub-menu {
    padding: var(--space-4);
    display: flex;
    gap: 5px;
    flex-direction: column;
  }

  .modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }

  .btn-secundario,
  .btn-primario {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
  }

  .btn-secundario {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
  }

  .btn-secundario:hover {
    background: #f9fafb;
    border-color: #9ca3af;
  }

  .btn-primario {
    background: #2563eb;
    color: white;
  }

  .btn-primario:hover {
    background: #1d4ed8;
  }



  /* MODAL PADRÃO */
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }

  /* ========================================
   FORMULÁRIO DE LEADS CONDICIONAL
   ======================================== */

  /* Oculta o formulário por padrão em todas as páginas */
  #formulario-leads-section,
  .sec-formulario-leads {
    display: none;
  }

  /* Mostra APENAS quando o checkbox está marcado */
  body.exibir-formulario-leads #formulario-leads-section,
  body.exibir-formulario-leads .sec-formulario-leads {
    display: block !important;
  }

  /* Estilos opcionais do formulário */
  #formulario-leads-section {
    padding: 60px 0;
    background: #f9f9f9;
    margin-top: 40px;
  }

  #formulario-leads-section h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 32px;
  }

  #formulario-leads-section .campo-form {
    margin-bottom: 20px;
  }

  #formulario-leads-section input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }

  #formulario-leads-section .btn-submit {
    width: 100%;
    padding: 18px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
  }

  #formulario-leads-section .btn-submit:hover {
    background: #005a87;
  }

  .rola-junto {
    margin-top: -180px;
    position: sticky;
    top: 50px;
  }

  .form-orcamentos {
    width: 100%;
    padding: var(--space-12);
    border-radius: var(--radius-xl);
    border: 1px solid var(--c1);
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .form-orcamentos::after {
    content: "";
    width: 80%;
    height: 8px;
    position: absolute;
    left: 10%;
    top: -8px;
    background-color: var(--c2);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  /*
  .form-tb::after {
    display: none;
  }*/

  .msg-final-form {
    width: 80%;
    font-size: 13px;
    text-align: center;
    margin: auto;
  }

  .form-contato-wrapper {
    width: 100%;
    padding-top: var(--space-5);
  }

  .form-contato {
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .form-contato .form-group {
    display: flex;
    gap: 5px;
    flex-direction: column;
  }

  .form-contato label {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--txt);
    font-size: var(--font-size-xs);
  }

  .form-contato .required {
    color: #e74c3c;
  }

  .form-contato .form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid #c2c2c2;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    transition: border-color 0.3s;
    box-sizing: border-box;
    font-weight: var(--font-weight-normal);
  }

  .form-contato .form-control:focus {
    outline: none;
    border-color: var(--c2);
  }

  .form-contato .form-submit-wrapper {
    margin-top: var(--space-3);
    text-align: center;
  }

  .cta-form {
    width: 100%;
    padding: var(--space-3);
  }

  /* Estilos para textarea */
  .form-contato textarea.form-control {
      resize: vertical;
      min-height: 100px;
      font-family: inherit;
  }

  /* Estilos para upload de arquivo */
  .form-contato .form-control-file {
    width: 100%;
    padding: var(--space-3);
    border: 2px dashed #ddd;
    border-radius: var(--radius-sm);
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s;
  }

  .form-contato .form-control-file:hover {
    border-color: var(--c1);
    background: #fff;
  }

  .form-contato .form-file-info {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
  }

  /* Newslleter site */
  #simple-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .box-newsletter-lateral>.simple-newsletter-form {
    background: transparent;
    padding: var(--space-5) 0 0 0;
    margin-top: var(--space-4);
    border-top: 1px solid #eee;
    border-radius: 0;
  }

  .box-newsletter-lateral>.simple-newsletter-form h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--ttl);

  }

  .limite-newsletter>.simple-newsletter-form {
    background: transparent;
    width: 100% !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .limite-newsletter>.simple-newsletter-form h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ttl);
  }

  .limite-newsletter>.simple-newsletter-form p {
    font-size: var(--font-size-base);
    color: var(--txt);
  }

  .limite-newsletter #simple-newsletter-form {
    display: flex !important;
    flex-wrap: wrap !important;
    /*align-items: flex-end;*/
    gap: 10px;
  }

  .limite-newsletter .form-group {
    flex: auto !important;
    margin-bottom: 0px !important;
  }

  .limite-newsletter .ajuste-especifico {
    width: auto !important;
    flex: auto !important;
  }

  /* COMENTÁRIO POST */
  .cont-comentarios-post {
    margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid #eee;
  }

  .comments-area {
    margin-top: var(--space-4);
  }

  .comment-list {
    list-style: none;
    padding: 0;
  }

  .comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .comment-form label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }

  .comment-form input,
  textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid #c2c2cc;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    transition: border-color 0.3s;
    box-sizing: border-box;
  }

  .comment-form input:focus,
  .comment-form textarea:focus {
    outline: none;
    border-color: var(--c2) !important;
  }

  .comment-form-comment,
  .comment-form-author,
  .comment-form-email,
  .comment-form-url {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }

  .comment-form-cookies-consent {
    display: flex;
    align-items: start;
    align-items: center;
    gap: 5px;
    padding: var(--space-2) 0;
  }

  .comment-form-cookies-consent input {
    width: auto;
    padding: var(--space-2) !important;
  }

  .comment-form-cookies-consent label {
    font-weight: var(--font-weight-normal);
  }

  .comment-form-cookies-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--c2);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
  }

  .comment-form-cookies-consent input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute;
    top: -3px;
    left: 3px;
    font-size: 14px;
    color: var(--c2);
  }


  .form-submit .submit {
    display: flex;
    padding: var(--space-3) var(--space-10);
    background-color: var(--bt-bg);
    color: var(--bt-tx);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: 400ms;
    border: 1px solid var(--bt-bg) !important;
    justify-content: var(--jc-center);
    line-height: var(--lh-13);
  }

  .form-submit .submit:hover {
    background: var(--bt-bg-h);
    border: 1px solid var(--bt-bg-h) !important;
    color: var(--bt-tx-h);
  }

  .comment-body {
    border-bottom: 1px solid #eee;
    padding: var(--space-6) 0;
  }

  .comment-body p {
    white-space: pre-line;
    font-weight: var(--font-weight-normal);
  }

  .comment-author {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-xs);
  }

  .comment-author img {
    border-radius: var(--radius-circle);
  }

  .comment-author .fn,
  .comment-author .says {
    font-style: normal;
  }

  .commentmetadata {
    font-size: 14px;
    color: #555;
    margin-bottom: var(--space-4);
  }

  .comment-content {
    margin-top: var(--space-4);
  }

  .comment-form textarea {
    width: 100%;
    min-height: 80px;
  }

  .comment-respond {
    padding-top: var(--space-8);
  }

  .comment-reply-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-5);
  }

  .comment-notes {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: var(--space-4);
    gap: 5px;
  }

  .logged-in-as {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: var(--space-4);
  }

  .required-field-message {
    width: 100%;
  }

  .logged-in-as a {
    text-decoration: none !important;
    font-weight: var(--peso-normal);
    padding: var(--space-2) var(--space-5);
    background-color: #eee;
    color: #555;
    border-radius: var(--radius-full);
    transition: 400ms;
  }

  .logged-in-as a:hover {
    opacity: 0.6;
  }

  .reply {
    margin-top: var(--space-4);
  }

  .reply a {
    text-decoration: none !important;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-6);
    background-color: #eee;
    color: #555;
    font-size: 12px;
    border-radius: var(--radius-full);
    transition: 400ms;
  }

  .reply a:hover {
    opacity: 0.7;
  }

  .search-form {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
  }

  .search-field {
    flex: 1;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    transition: 400ms;
  }

  .search-field:hover {
    outline: none !important;
    border-color: var(--c1) !important;
  }

  .search-field:focus {
    outline: none !important;
    border-color: var(--c2) !important;
  }

  .search-submit {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    transition: 400ms;
    position: absolute;
    right: var(--space-2);
    border-radius: var(--radius-circle);
    border: 1px solid transparent;
    background-color: transparent;
  }

  .search-submit:hover {
    background-color: var(--c2);
    fill: var(--c1);
  }

  .box-compartilhar-post {
    border-top: 1px solid #eee;
    padding-top: var(--space-5);
  }

  .share-post {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .share-post a {
    width: 35px;
    height: 35px;
    border-radius: var(--radius-circle);
    background-color: var(--bt-bg);
    display: flex;
    justify-content: center;
    transition: 400ms;
    color: var(--bt-tx);
  }

  .share-post a:hover {
    background-color: var(--bt-bg-h);
    color: var(--bt-tx-h);
  }

  .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-10);
  }

  .lk-tag {
    font-size: var(--fs-13);
    padding: var(--esp-5) var(--esp-15);
    border-radius: var(--borda-infinita);
    background: #f1f1f1;
    color: #333;
    text-decoration: none;
    font-weight: var(--peso-normal);
    transition: 400ms;
  }

  .lk-tag:hover {
    opacity: 0.7;
  }

	/* Oculta header e footter da página de links da bio */
  .page-template-page-links header,
  .page-template-page-links footer {
    display: none !important;
  }


/* FIM */

/* ============================================
   SECTIONS - HEADER
   ============================================ */
  .header-site {
    background-color: var(--head-bg);
  }

  .box-contatos-topo {
    background-color: var(--top-bg);
    padding: var(--space-5) 0;
  }

  .ajuste-topo-site {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .lista-contatos {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
  }

  .lista-contatos li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    color: var(--top-txt);
    transition: var(--transition-base);
  }

  .lista-contatos li:hover {
    opacity: 0.7;
  }

  .lista-contatos li svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .lista-redes-sociais {
    display: flex;
    gap: 8px;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
  }

  .lista-redes-sociais li a {
    display: flex;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--head-ico);
    background-color: var(--head-btn);
    border-radius: var(--radius-full);
    border: 1px solid var(--head-btn);
    transition: var(--transition-base);
    align-items: center;
  } 

  .lista-redes-sociais li a:hover {
    background-color: transparent;
    color: var(--head-btn);
  }

  .lista-redes-sociais svg {
    width: 18px;
    height: 18px;
  }

  .cta-topo-mobile {
    display: none;
  }

  .ajuste-topo-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

	.custom-logo-link {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 200px;
	  height: 80px;
	  /* Evita que o link em si cause reflow */
	  flex-shrink: 0;
	}

	.custom-logo {
	  width: 200px;
	  height: 80px;
	  max-width: 100%;
	  object-fit: contain;
	  object-position: left center;
	}


  .box-menu-topo {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .menu-site ul {
    margin: 0;
    padding-left: 0;
  }

  .menu-site ul li {
    display: inline-block;
    position: relative;
  }

  .menu-site ul li a {
    position: relative;
    padding: var(--space-10) 0;
    margin: 0 var(--space-4);
    display: inline-block;
    text-decoration: none;
    font-size: var(--font-size-base);
    color: var(--head-txt);
    transition: color .25s ease;
  }

  .menu-site ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;

    /* CENTRALIZAÇÃO + ANIMAÇÃO JUNTOS */
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;

    height: 5px;
    width: 80%;
    background: var(--c2);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: transform .25s ease;
  }

  .menu-site ul li:hover>a::after,
  .menu-site ul li.current-menu-item>a::after {
    transform: translateX(-50%) scaleY(1);
    font-weight: var(--font-weight-bold);
  }

  .current-menu-item>a,
  .current_page_item>a,
  .current-menu-parent>a,
  .current-menu-ancestor>a {
    font-weight: var(--font-weight-semibold);
  }

  /* SUBMENU CABEÇALHO */
  .menu-site ul.sub-menu {
    position: absolute;
    padding-left: 0;
    background-color: var(--head-bg);
    z-index: 5;
    text-align: left;
    display: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
  }

  .menu-site ul .menu-item-has-children:hover>ul,
  .menu-site ul .menu-item-has-children:focus+ul {
    display: block
  }

  .menu-site ul.sub-menu li {
    width: max-content;
    display: block;
  }

  .menu-site ul.sub-menu a {
    background-color: var(--head-bg);
    color: var(--head-txt);
    padding: var(--space-2) var(--space-6);
    margin: 0px;
    font-size: var(--font-size-xs);
    width: 100%;
	}

  .menu-site ul.sub-menu a:hover {
    opacity: 0.8;
  }

  .menu-site ul.sub-menu a::after {
    height: 0px !important;
  }

  .menu-icon,
  .check-button {
    cursor: pointer;
    display: none;
  }

  .menu-icon .bar1,
  .menu-icon .bar2,
  .menu-icon .bar3 {
    width: 25px;
    height: 3px;
    background-color: var(--head-txt);
    margin: 8px 0;
    border-radius: var(--radius-full);
    transition: 0.4s;
  }

  /* PÁGINA DE DETALHES - SERVIÇOS E PROJETOS*/
  .ajuste-pagina-cb-lateral {
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }

  .img-ctp {
    width: 100%;
    border-radius: var(--radius-xl);
    margin: -60px 0 var(--space-10) 0;
  }

  .descricao-ctp {
    width: 60%;
    padding-right: var(--space-15);
  }

  .barra-lateral-ctp {
    width: 40%;
  }

  .box-busca-sidebar,
  .box-categorias-blog,
  .box-compartilhar-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .box-busca-sidebar {
    padding-bottom: var(--space-3);
  }

  .div-chamada-whatsapp {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-10);
    gap: 20px;
    text-align: center;
  }




/* FIM */


/* ============================================
   SECTIONS - FOOTER
   ============================================ */
  
  /* SERVIÇOS */
  .sec-barra-titulos {
    background-color: var(--bar-bg);
    padding: var(--space-12) 0 var(--space-30) 0;
    color: var(--bar-txt);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .sec-page-padaro {
    padding: var(--space-12) 0;
  }

  .alinhamento-elementos-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sec-lista-padrao {
    padding-top: 0;
    margin-top: -60px;
    background-color: transparent;
    position: relative;
    z-index: 1;
  }

  .ajuste-zindex {
    position: relative;
    z-index: 2;
  }

  .ajuste-bloco-texto-conteudo {
		margin-top: 60px;
		padding-top: 40px;
		border-top: 1px solid #eee;
	}

  .footer-site {
    background-color: var(--foot-bg);
  }

  .ajuste-footer {
    display: flex;
    padding: var(--space-15) var(--space-5);
    color: var(--foot-txt);
    gap: 40px;
  }

  .box-footer {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .t-footer {
    font-weight: var(--font-weight-semibold);
    display: block;
	font-size: var(--font-size-sm);
  }

  .social-footer li a {
    color: var(--foot-ico);
    background-color: var(--foot-btn);
    border: 1px solid var(--foot-btn);
  }

  .social-footer li a:hover {
    background-color: transparent;
    color: var(--foot-btn);
  }

  #menu-menu-rodape {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #menu-menu-rodape a {
    color: var(--foot-txt);
    text-decoration: none;
    transition: var(--transition-base);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
  }

  #menu-menu-rodape a:hover {
    opacity: 0.6;
  }

  #menu-menu-rodape .menu-item::after,
  #menu-menu-categorias-servico .menu-item::after {
    display: none;
  }

  .menu-item::after {
    display: none;
  }

  .ajuste-footer hr {
    display: none;
  }
	.footer-logo-link {
	  display: flex;
	  width: 160px;
	  height: 80px;
	  flex-shrink: 0;
	}

	.logo-rodape {
	  width: 160px;
	  height: 80px;
	  max-width: 100%;
	  object-fit: contain;
	  object-position: left top;
	}

  .grupo-contatos-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .contatos-fixos,
  .contatos-whatsapp,
  .contatos-emails {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .contato-item a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    color: var(--foot-txt);
  }

  .box-complemento-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
  }

  .box-endereco-footer {
    padding: 0;
  }

  .box-social-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .copy-ecila {
    background-color: #fff;
    padding: var(--space-8) 0;
  }

  .ajuste-copy-site {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .info-empresa-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	font-size: var(--font-size-xs);
  }

  .info-empresa-footer a {
    transition: var(--transition-base);
  }

  .info-empresa-footer a:hover {
    opacity: 0.6;
  }

  .ass-ecila {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
	font-size: var(--font-size-xs);
  }

/* FIM */


/* ============================================
   RESPONSIVO
   ============================================ */
  /* 1280PX */
  @media (max-width: 1280px) {
    .container {
      width: 100%;
    }
  }

  /* 1024PX */
  @media (max-width: 1024px) {  
	  .container__title-group {
	  width: 100%;
  }
    .box-itens-principal-topo {
      padding: var(--space-2) 0;
    }
    .menu-icon,
    .check-button {
      display: block;
    }

    .check-button {
      border: none;
      background: transparent;
      height: 55px;
      padding: 0;
    }

    .menu-site ul {
      position: absolute;
      width: 100%;
      background: var(--head-bg);
      left: -1399px;
      text-align: left;
      transition: all cubic-bezier(.79, .14, .15, .86) .5s;
      padding: 0;
      margin: 0;
      z-index: 5;
    }

    .menu-site ul:not(.sub-menu) {
      margin-top: 48px;
    }

    .menu-site ul li {
      display: block;
    }

    .menu-site ul li a {
      color: var(--head-txt);
      display: block;
      padding: var(--space-4) 0;
      margin-right: 0;
    }

    .menu-site ul li a::after {
      display: none;
    }

    .menu-site ul.sub-menu {
      position: relative;
      top: 0;
      margin-left: var(--space-5);
      display: block;
      width: auto;
    }

    .menu-site ul.sub-menu a {
      color: var(--head-txt);
    }

    .show-dropdown {
      left: 0 !important;
    }

    .animate-button .bar1 {
      -webkit-transform: rotate(-45deg) translate(-8px, 4px);
      transform: rotate(-45deg) translate(-8px, 4px);
    }

    .animate-button .bar2 {
      opacity: 0;
    }

    .animate-button .bar3 {
      -webkit-transform: rotate(45deg) translate(-11px, -7px);
      transform: rotate(45deg) translate(-11px, -8px);
    }

    .menu-item::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: var(--head-txt);
      position: absolute;
      opacity: 0.1;
    }

    .box-contatos-topo {
      padding: 0;
    }

    .cta-topo-mobile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: var(--space-4) 0;
      color: var(--top-txt);
      font-weight: var(--font-weight-semibold);
    }

    .box-menu-topo {
      gap: 0;
    }

    .cta-topo,
    .box-contatos-topo .ie-contatos,
    .box-contatos-topo .ie-redes {
      display: none;
    }
	  .social-footer {
		  display:flex;
	  }
	  

    .ajuste-pagina-cb-lateral {
      flex-direction: column;
    }

    .descricao-ctp {
      width: 100%;
      padding-right: var(--space-0);
    }

    .barra-lateral-ctp {
      width: 100%;
      padding-top: var(--space-6);
    }

    .rola-junto {
      margin-top: var(--space-10);
      position: relative;
      top: 0px;
    }


    .ajuste-footer {
      flex-direction: column;
      gap: 20px;
    }

    .box-footer {
      width: 100%;
    }

    .ajuste-footer hr,
    .box-footer hr {
      width: 100%;
      opacity: 0.2;
      border: none;
      border-top: 1px solid var(--foot-txt);
      display: block;
    }
	  
	  .hr-footer {
		  margin-top: 20px;
	  }

    .box-complemento-footer {
      padding: 0;
    }

    .ajuste-copy-site {
      gap: 20px;
    }

    .info-empresa-footer {
      width: 100%;
      justify-content: center;
    }

    .ass-ecila {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      margin-top: var(--esp-20);
    }

  }

  /* 768PX */
  @media (max-width: 768px) {
    .limite-obrigado {
      max-width: 95%;
    }

    .archive-descricao {
      font-size: var(--font-size-base);
    }

    .form-contato textarea.form-control {
      min-height: 80px;
    }

    .page-numbers {
      padding: var(--space-2) var(--space-4);
    }

    .breadcrumbs {
      font-size: 13px;
      margin-bottom: 20px;
    }

    .breadcrumb-separator {
      margin: 0 5px;
    }

    .card-conteudo {
      padding: var(--space-3);
		/* Reserva espaço mínimo para o conteúdo */
    min-height: 80px;
    }

    .acao-card {
      padding: 0 var(--space-3) var(--space-3) var(--space-3);
    }

    .acao-card-post {
      padding-top: var(--space-3);
    }

    .cta-card {
      padding: var(--space-2);
      line-height: var(--line-height-tight);
    }

    .agrupa-titulo-card-projetos {
      padding: var(--space-4);
    }

    .card-link {
      width: 35px;
      height: 35px;
    }

    .arquivo-card {
      padding: var(--space-6);
    }

    .projetos-grid-destaque {
      grid-template-columns: 1fr 1fr;
	    gap: 10px;
    }

    .galeria-grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
    }
	  
	.card-imagem {
        /* Mantém o aspect-ratio no mobile, sem height fixo */
        aspect-ratio: 1 / 1;
    }

    .lightbox-prev,
    .lightbox-next {
      font-size: 30px;
      padding: 10px;
    }

    .lightbox-close {
      font-size: 40px;
      right: 20px;
    }

    .bloco-destaque {
      grid-template-columns: 1fr !important;
      gap: 30px !important;
    }

	.bloco-imagem {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    width: 100%;
    /* Remove o order duplicado — você tem dois blocos .bloco-imagem no CSS */
}

.bloco-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bloco-conteudo {
    order: 2 !important;
}

@media (max-width: 768px) {
    .bloco-destaque {
        grid-template-columns: 1fr !important;
    }

    .bloco-imagem {
        order: 1 !important;
    }
}
	  
	  
	  

		.imagem-bloco-destaque-conteudo {
			width: 100%;
			height: auto;
			object-fit: cover;
			display: block;
		}

    .alinhamento-elementos-superior {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: column;
      gap: 30px;
    }

    /* Primeiro card ocupa 100% */
    .projetos-grid-destaque article:first-child {
      grid-column: 1 / -1;
    }

    .footer-logo-link {
      max-width: 180px;
    }

    .logo-rodape {
      max-width: 180px;
    }
  }

  /* 640PX */
  @media (max-width: 640px) {
    .titulo-primario {
      font-size: var(--font-size-3xl);
    }

    .servicos-grid {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 10px;
    }

    .bt-galeria {
      width: 35px;
      height: 35px;
    }

    .form-orcamentos {
      padding: var(--space-8);
    }

    .msg-final-form {
      width: 100%;
    }

  }

  /* 576PX */
  @media (max-width: 576px) {
    .titulo-primario {
      font-size: var(--font-size-2xl);
    }

    .servicos-grid {
      grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
      gap: 10px;
    }

    .agrupa-titulo-card-projetos {
      padding: var(--space-3);
    }

    .card-link {
      width: 26px;
      height: 26px;
    }

    .galeria-grid {
      grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    }

    .galeria-item img {
      height: 150px;
    }

    .form-orcamentos {
      padding: var(--space-8) var(--space-5);
    }

  }


/* FIM MOBILE */