/*
Theme Name:   Hello Elementor Child (BMQ Design System)
Description:  Tema filho seguro para testes. Contém o Design System v2.0 da BMQ.
Author:       BMQ
Template:     hello-elementor
Version:      1.0.1
Text Domain:  hello-elementor-child
*/

/* ================================================================
       BMQ DESIGN SYSTEM v2.0 — TOKENS GLOBAIS
       Revisado com base no Portfolio Oficial 2025
       CEOs: Lorrane Queiroz & Paulo Ricardo
    ================================================================ */
:root {

  /* ——— PALETA OFICIAL ——— */
  --bmq-navy-dark: #1B2D5A;
  /* Bloco 1 logo — dominante */
  --bmq-navy-mid: #2B4E8C;
  /* Bloco 2 logo — secundário */
  --bmq-blue-steel: #4A7AB5;
  /* Bloco 3 logo — acento */

  /* ——— FUNDOS ——— */
  --bmq-dark-bg: #111D3C;
  /* Fundo seções escuras */
  --bmq-page-dark: #1E2E54;
  /* Fundo das páginas escuras do portfolio */
  --bmq-off-white: #F4F5F9;
  /* Fundo claro alternativo */
  --bmq-white: #FFFFFF;

  /* ——— TEXTOS ——— */
  --bmq-text-dark: #1B2D5A;
  --bmq-text-body: #2E3D5C;
  --bmq-text-muted: #7A8BAE;
  --bmq-divider: #D4DBE8;

  /* ——— NUNCA USE GOLD COMO COR PRINCIPAL ——— */
  /* O portfolio real NÃO usa gold. Reservado para casos extremamente seletivos. */
  --bmq-gold: #C4A052;

  /* ——— TIPOGRAFIA ——— */
  /* Montserrat: headlines grandes no estilo do portfolio */
  --font-display: 'Montserrat', sans-serif;
  /* Cormorant Garamond: wordmark do logo e citações editoriais */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  /* Inter: corpo de texto, UI, labels */
  --font-body: 'Inter', sans-serif;

  /* ——— ESCALA TIPOGRÁFICA ——— */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-md: 1.125rem;
  /* 18px */
  --text-lg: 1.375rem;
  /* 22px */
  --text-xl: 1.75rem;
  /* 28px */
  --text-2xl: 2.25rem;
  /* 36px */
  --text-3xl: 3rem;
  /* 48px */
  --text-4xl: 4rem;
  /* 64px */
  --text-hero: clamp(3rem, 7vw, 5.5rem);
  /* Fluido, estilo portfolio */

  /* ——— ESPAÇAMENTO (base 4px) ——— */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ——— BORDAS — LINGUAGEM QUADRADA ——— */
  /* Coerente com o logo e a fachada de vidro. MÍNIMO de arredondamento. */
  --radius-none: 0px;
  --radius-xs: 2px;
  /* Apenas detalhes mínimos */
  --radius-sm: 4px;
  /* Botões, ícones, badges */
  --radius-md: 6px;
  /* Cards, inputs */
  --radius-lg: 8px;
  /* Containers maiores */
  /* NUNCA usar radius > 8px nos elementos principais */

  /* ——— SOMBRAS ——— */
  --shadow-xs: 0 1px 3px rgba(27, 45, 90, 0.06);
  --shadow-sm: 0 2px 8px rgba(27, 45, 90, 0.08);
  --shadow-md: 0 6px 24px rgba(27, 45, 90, 0.12);
  --shadow-lg: 0 16px 48px rgba(27, 45, 90, 0.16);

  /* ——— TRANSIÇÕES ——— */
  --t-fast: 0.15s ease;
  --t-base: 0.22s ease;
  --t-slow: 0.35s ease;

  /* ——— Z-INDEX ——— */
  --z-header: 100;
  --z-modal: 200;
}

/* ================================================================
       RESET & BASE
    ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--bmq-text-body);
  background: var(--bmq-white);
  line-height: 1.7;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
       LOGO BMQ — CONSTRUÇÃO FIEL AO PORTFOLIO
       Blocos: cantos quadrados, 3 colunas, alturas decrescentes
       Wordmark: Cormorant Garamond (serif clássico)
    ================================================================ */
.bmq-logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
}

/* Container dos blocos — quadrado sem rounding */
.bmq-logo__blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  align-items: flex-end;
  margin-right: 10px;
}

.bmq-logo__block {
  width: 14px;
  border-radius: var(--radius-none);
  /* CANTOS RETOS */
}

.bmq-logo__block--1 {
  background: var(--bmq-navy-dark);
  height: 42px;
}

.bmq-logo__block--2 {
  background: var(--bmq-navy-mid);
  height: 32px;
}

.bmq-logo__block--3 {
  background: var(--bmq-blue-steel);
  height: 24px;
}

.bmq-logo__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bmq-logo__wordmark {
  font-family: var(--font-serif);
  /* Garamond — fiel ao logo */
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--bmq-navy-dark);
  letter-spacing: 0.08em;
  line-height: 1;
}

.bmq-logo__tagline {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bmq-text-muted);
  margin-top: 3px;
}

/* Versão invertida (fundo escuro) */
.bmq-logo--inverted .bmq-logo__block--1 {
  background: rgba(255, 255, 255, 0.30);
}

.bmq-logo--inverted .bmq-logo__block--2 {
  background: rgba(255, 255, 255, 0.60);
}

.bmq-logo--inverted .bmq-logo__block--3 {
  background: rgba(255, 255, 255, 0.90);
}

.bmq-logo--inverted .bmq-logo__wordmark {
  color: var(--bmq-white);
}

.bmq-logo--inverted .bmq-logo__tagline {
  color: rgba(255, 255, 255, 0.45);
}

/* Versão compacta (header) */
.bmq-logo--compact .bmq-logo__block {
  width: 9px;
}

.bmq-logo--compact .bmq-logo__block--1 {
  height: 28px;
}

.bmq-logo--compact .bmq-logo__block--2 {
  height: 21px;
}

.bmq-logo--compact .bmq-logo__block--3 {
  height: 16px;
}

.bmq-logo--compact .bmq-logo__wordmark {
  font-size: 1.1rem;
}

.bmq-logo--compact .bmq-logo__blocks {
  margin-right: 7px;
}

/* ================================================================
       TIPOGRAFIA — CLASSES UTILITÁRIAS
    ================================================================ */
/* Hero: estilo "Resultados que você conquista" do portfolio */
.bmq-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-hero);
  color: var(--bmq-navy-dark);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.bmq-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  color: var(--bmq-navy-dark);
  line-height: 1.08;
}

.bmq-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--bmq-navy-dark);
  line-height: 1.15;
}

.bmq-h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--bmq-navy-dark);
}

.bmq-h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--bmq-navy-dark);
}

.bmq-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--bmq-text-body);
  line-height: 1.75;
}

.bmq-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--bmq-text-body);
  line-height: 1.75;
}

.bmq-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--bmq-text-muted);
}

.bmq-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bmq-blue-steel);
}

/* Citação editorial — Cormorant Garamond */
.bmq-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--bmq-navy-dark);
  line-height: 1.55;
}

/* Estados em fundo escuro */
.on-dark .bmq-h1,
.on-dark .bmq-h2,
.on-dark .bmq-h3,
.on-dark .bmq-h4,
.on-dark .bmq-h5 {
  color: var(--bmq-white);
}

.on-dark .bmq-lead,
.on-dark .bmq-body {
  color: rgba(255, 255, 255, 0.75);
}

.on-dark .bmq-small {
  color: rgba(255, 255, 255, 0.45);
}

.on-dark .bmq-label {
  color: var(--bmq-blue-steel);
}

.on-dark .bmq-quote {
  color: var(--bmq-white);
}

/* ================================================================
       LAYOUT
    ================================================================ */
.bmq-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.bmq-container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.bmq-container--wide {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.bmq-section {
  padding: var(--sp-24) 0;
}

.bmq-section--sm {
  padding: var(--sp-16) 0;
}

.bmq-section--lg {
  padding: var(--sp-32) 0;
}

.bmq-section--dark {
  background: var(--bmq-page-dark);
}

.bmq-section--navy {
  background: var(--bmq-navy-dark);
}

.bmq-section--light {
  background: var(--bmq-off-white);
}

.bmq-section--white {
  background: var(--bmq-white);
}

/* Grids */
.bmq-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.bmq-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-6);
}

.bmq-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.bmq-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

.bmq-grid-60-40 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-12);
  align-items: center;
}

.bmq-grid-40-60 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-12);
  align-items: center;
}

/* ================================================================
       HEADER
    ================================================================ */
.bmq-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--sp-4) 0;
  transition: background var(--t-base), box-shadow var(--t-base);
}

.bmq-header--solid {
  background: var(--bmq-navy-dark);
  box-shadow: var(--shadow-md);
}

.bmq-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.bmq-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.bmq-nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.70);
  transition: color var(--t-fast);
  letter-spacing: 0.01em;
}

.bmq-nav__link:hover {
  color: var(--bmq-white);
}

/* ================================================================
       BOTÕES — LINGUAGEM QUADRADA (radius 4px)
    ================================================================ */
.bmq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  /* 4px — quadrado como o logo */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-base);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Primário */
.bmq-btn--primary {
  background: var(--bmq-navy-dark);
  color: var(--bmq-white);
  border-color: var(--bmq-navy-dark);
}

.bmq-btn--primary:hover {
  background: var(--bmq-navy-mid);
  border-color: var(--bmq-navy-mid);
}

/* Secundário */
.bmq-btn--secondary {
  background: transparent;
  color: var(--bmq-navy-dark);
  border-color: var(--bmq-navy-dark);
}

.bmq-btn--secondary:hover {
  background: var(--bmq-navy-dark);
  color: var(--bmq-white);
}

/* Ghost (fundo escuro) */
.bmq-btn--ghost {
  background: transparent;
  color: var(--bmq-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.bmq-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Branco sólido */
.bmq-btn--white {
  background: var(--bmq-white);
  color: var(--bmq-navy-dark);
  border-color: var(--bmq-white);
}

.bmq-btn--white:hover {
  background: var(--bmq-off-white);
}

/* Tamanhos */
.bmq-btn--sm {
  padding: 8px 16px;
  font-size: var(--text-xs);
}

.bmq-btn--lg {
  padding: 14px 32px;
  font-size: var(--text-base);
}

.bmq-btn--xl {
  padding: 16px 40px;
  font-size: var(--text-md);
}

/* ================================================================
       ÍCONE-BOX — Estilo portfolio (quadrado + ícone SVG)
       Container translúcido quadrado (radius 4px), ícone linha simples
    ================================================================ */
.bmq-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  /* 4px */
  background: rgba(74, 122, 181, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bmq-icon-box svg {
  width: 22px;
  height: 22px;
  stroke: var(--bmq-blue-steel);
  fill: none;
  stroke-width: 1.8;
}

/* Versão dark (sobre fundo navy) */
.bmq-icon-box--dark {
  background: rgba(74, 122, 181, 0.22);
}

.bmq-icon-box--dark svg {
  stroke: rgba(255, 255, 255, 0.8);
}

/* Tamanhos */
.bmq-icon-box--sm {
  width: 36px;
  height: 36px;
}

.bmq-icon-box--sm svg {
  width: 16px;
  height: 16px;
}

.bmq-icon-box--lg {
  width: 60px;
  height: 60px;
}

.bmq-icon-box--lg svg {
  width: 28px;
  height: 28px;
}

/* ================================================================
       CARDS — Cantos menos arredondados, estilo portfolio
    ================================================================ */
/* Card base */
.bmq-card {
  background: var(--bmq-white);
  border-radius: var(--radius-md);
  /* 6px */
  padding: var(--sp-8);
  border: 1px solid var(--bmq-divider);
  box-shadow: var(--shadow-xs);
}

.bmq-card--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}

.bmq-card--hover {
  transition: box-shadow var(--t-base), transform var(--t-base);
  cursor: pointer;
}

.bmq-card--hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card de resultado (estilo "Resultados" do portfolio — dark bg com ícone) */
.bmq-result-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  /* 4px — mais quadrado */
  padding: var(--sp-6);
}

.bmq-result-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(74, 122, 181, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.bmq-result-card__icon svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255, 255, 255, 0.75);
  fill: none;
  stroke-width: 1.8;
}

.bmq-result-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--bmq-white);
  margin-bottom: var(--sp-2);
}

.bmq-result-card__title strong {
  color: var(--bmq-white);
}

.bmq-result-card__body {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}

/* Card de solução (estilo "Soluções" do portfolio — dark bg, checkmark) */
.bmq-solution-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  /* 4px */
  padding: var(--sp-6);
  position: relative;
}

.bmq-solution-card::before {
  /* Checkmark no canto superior direito — fiel ao portfolio */
  content: '✓';
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  background: var(--bmq-blue-steel);
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  text-align: center;
}

.bmq-solution-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--bmq-white);
  margin-bottom: var(--sp-2);
  padding-right: 28px;
}

.bmq-solution-card__title strong {
  color: var(--bmq-white);
  font-weight: 900;
}

.bmq-solution-card__body {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.65;
}

/* Card de depoimento */
.bmq-testimonial {
  background: var(--bmq-white);
  border: 1px solid var(--bmq-divider);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xs);
}

.bmq-testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--bmq-navy-dark);
  line-height: 1.55;
  margin-bottom: var(--sp-6);
}

.bmq-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.bmq-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  /* quadrado, coerente com a marca */
  background: linear-gradient(135deg, var(--bmq-navy-dark), var(--bmq-blue-steel));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-xs);
  flex-shrink: 0;
  font-family: var(--font-serif);
}

.bmq-testimonial__name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--bmq-navy-dark);
}

.bmq-testimonial__role {
  font-size: var(--text-xs);
  color: var(--bmq-text-muted);
  margin-top: 2px;
}

/* Card stat */
.bmq-stat {
  background: var(--bmq-navy-dark);
  border-radius: var(--radius-sm);
  /* 4px */
  padding: var(--sp-8);
  text-align: center;
}

.bmq-stat__number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-4xl);
  color: var(--bmq-white);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.bmq-stat__number em {
  font-style: normal;
  color: var(--bmq-blue-steel);
}

.bmq-stat__label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

/* ================================================================
       BADGES / TAGS
    ================================================================ */
.bmq-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  /* 2px — praticamente quadrado */
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bmq-badge--navy {
  background: var(--bmq-navy-dark);
  color: white;
}

.bmq-badge--blue {
  background: rgba(74, 122, 181, 0.15);
  color: var(--bmq-blue-steel);
}

.bmq-badge--dark {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.bmq-badge--outline {
  background: transparent;
  border: 1px solid var(--bmq-navy-dark);
  color: var(--bmq-navy-dark);
}

/* ================================================================
       FORMULÁRIOS — Inputs com radius 4px
    ================================================================ */
.bmq-label-input {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bmq-navy-dark);
  margin-bottom: var(--sp-2);
}

.bmq-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--bmq-divider);
  border-radius: var(--radius-sm);
  /* 4px */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--bmq-text-dark);
  background: var(--bmq-white);
  transition: border-color var(--t-fast);
  outline: none;
}

.bmq-input:focus {
  border-color: var(--bmq-navy-mid);
}

.bmq-input--error {
  border-color: #C83232;
}

.bmq-input-note {
  font-size: var(--text-xs);
  color: var(--bmq-text-muted);
  margin-top: 4px;
}

/* ================================================================
       STEP / PROCESSO — 4 etapas BMQ
    ================================================================ */
.bmq-step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.bmq-step__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  /* 4px */
  background: var(--bmq-navy-dark);
  border: 2px solid rgba(74, 122, 181, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-base);
  color: var(--bmq-blue-steel);
}

.bmq-step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--bmq-white);
  margin-bottom: var(--sp-1);
}

.bmq-step__title strong {
  color: var(--bmq-white);
}

.bmq-step__body {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
}

/* ================================================================
       SEÇÃO HERO — fundo escuro, tipografia gigante
    ================================================================ */
.bmq-hero {
  min-height: 100vh;
  background: var(--bmq-dark-bg);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.bmq-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: rgba(43, 78, 140, 0.12);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ================================================================
       SEÇÃO TRANSIÇÃO (branco + logo + headline gigante)
       Fiel ao padrão do portfolio (páginas intercalares brancas)
    ================================================================ */
.bmq-transition-page {
  background: var(--bmq-white);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-12) 0;
  position: relative;
}

.bmq-transition-page__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--bmq-navy-dark);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.bmq-transition-page__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--bmq-divider);
}

.bmq-transition-page__meta {
  font-size: var(--text-xs);
  color: var(--bmq-text-muted);
}

/* ================================================================
       SECTION HEADER
    ================================================================ */
.bmq-section-header {
  margin-bottom: var(--sp-12);
  max-width: 640px;
}

.bmq-section-header--center {
  margin: 0 auto var(--sp-12);
  text-align: center;
}

.bmq-section-header__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bmq-blue-steel);
  margin-bottom: var(--sp-3);
}

.bmq-section-header__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  color: var(--bmq-navy-dark);
  line-height: 1.08;
  margin-bottom: var(--sp-4);
}

.on-dark .bmq-section-header__title {
  color: var(--bmq-white);
}

.bmq-section-header__subtitle {
  font-size: var(--text-md);
  color: var(--bmq-text-body);
  line-height: 1.7;
}

.on-dark .bmq-section-header__subtitle {
  color: rgba(255, 255, 255, 0.62);
}

/* ================================================================
       CTA BANNER
    ================================================================ */
.bmq-cta-banner {
  background: var(--bmq-page-dark);
  border-radius: var(--radius-lg);
  /* 8px */
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bmq-cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(27, 45, 90, 0.8) 0%, rgba(43, 78, 140, 0.5) 100%);
  pointer-events: none;
}

.bmq-cta-banner>* {
  position: relative;
  z-index: 1;
}

/* ================================================================
       FOOTER
    ================================================================ */
.bmq-footer {
  background: var(--bmq-dark-bg);
  padding: var(--sp-16) 0 var(--sp-8);
}

.bmq-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--sp-6);
}

.bmq-footer__tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.8;
  margin-top: var(--sp-4);
}

.bmq-footer__col-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bmq-blue-steel);
  margin-bottom: var(--sp-4);
}

.bmq-footer__link {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--sp-3);
  transition: color var(--t-fast);
}

.bmq-footer__link:hover {
  color: var(--bmq-white);
}

.bmq-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.bmq-footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.25);
}

/* ================================================================
       WHATSAPP FAB
    ================================================================ */
.bmq-whatsapp-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: var(--radius-sm);
  /* 4px — quadrado! */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
  transition: background var(--t-fast), transform var(--t-fast);
}

.bmq-whatsapp-fab:hover {
  background: #1DA851;
  transform: scale(1.05);
}

.bmq-whatsapp-fab svg {
  width: 26px;
  height: 26px;
  fill: white;
}

/* ================================================================
       DIVIDER
    ================================================================ */
.bmq-divider {
  height: 1px;
  background: var(--bmq-divider);
  margin: var(--sp-8) 0;
}

.bmq-divider--dark {
  background: rgba(255, 255, 255, 0.1);
}

/* ================================================================
       RESPONSIVIDADE
    ================================================================ */
@media (max-width: 1024px) {
  .bmq-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bmq-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .bmq-grid-2,
  .bmq-grid-3,
  .bmq-grid-4,
  .bmq-grid-60-40,
  .bmq-grid-40-60 {
    grid-template-columns: 1fr;
  }

  .bmq-h2 {
    font-size: var(--text-2xl);
  }

  .bmq-section {
    padding: var(--sp-16) 0;
  }

  .bmq-container {
    padding: 0 var(--sp-5);
  }

  .bmq-footer__grid {
    grid-template-columns: 1fr;
  }

  .bmq-cta-banner {
    padding: var(--sp-10) var(--sp-6);
  }

  .bmq-transition-page__headline {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }
}

@media (max-width: 480px) {

  .bmq-hero__actions,
  .bmq-cta-banner__actions {
    flex-direction: column;
  }

  .bmq-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
       UTILITÁRIOS
    ================================================================ */
.bmq-text-center {
  text-align: center;
}

.bmq-flex {
  display: flex;
}

.bmq-items-center {
  align-items: center;
}

.bmq-gap-4 {
  gap: var(--sp-4);
}

.bmq-gap-6 {
  gap: var(--sp-6);
}

.bmq-gap-8 {
  gap: var(--sp-8);
}

.bmq-mt-4 {
  margin-top: var(--sp-4);
}

.bmq-mt-6 {
  margin-top: var(--sp-6);
}

.bmq-mt-8 {
  margin-top: var(--sp-8);
}

.bmq-mt-12 {
  margin-top: var(--sp-12);
}

.bmq-mb-4 {
  margin-bottom: var(--sp-4);
}

.bmq-mb-6 {
  margin-bottom: var(--sp-6);
}

.bmq-mb-8 {
  margin-bottom: var(--sp-8);
}

.bmq-mb-12 {
  margin-bottom: var(--sp-12);
}

.bmq-fw-bold {
  font-weight: 700;
}

.bmq-fw-black {
  font-weight: 900;
}

/* ================================================================
       DESIGN SYSTEM — APRESENTAÇÃO (só neste arquivo)
    ================================================================ */
body {
  background: #EBEDF4;
}

.ds-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.ds-cover {
  background: var(--bmq-navy-dark);
  border-radius: var(--radius-sm);
  /* 4px — quadrado */
  padding: 56px 48px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.ds-cover::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: rgba(43, 78, 140, 0.25);
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.ds-section {
  background: var(--bmq-white);
  border-radius: var(--radius-sm);
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}

.ds-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bmq-blue-steel);
  background: rgba(74, 122, 181, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  margin-bottom: 20px;
}

.ds-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--bmq-navy-dark);
  margin-bottom: 6px;
}

.ds-desc {
  font-size: 0.875rem;
  color: var(--bmq-text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.ds-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bmq-text-muted);
  display: block;
  margin-bottom: 8px;
}

.ds-divider {
  height: 1px;
  background: var(--bmq-divider);
  margin: 28px 0;
}

/* Swatches */
.ds-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ds-swatch {
  border-radius: var(--radius-xs);
  overflow: hidden;
  width: 110px;
  box-shadow: var(--shadow-xs);
}

.ds-swatch__color {
  height: 64px;
}

.ds-swatch__info {
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--bmq-divider);
  border-top: none;
}

.ds-swatch__name {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--bmq-navy-dark);
}

.ds-swatch__hex {
  font-family: monospace;
  font-size: 0.65rem;
  color: var(--bmq-text-muted);
}

.ds-swatch__role {
  font-size: 0.6rem;
  color: var(--bmq-blue-steel);
  margin-top: 2px;
  font-weight: 600;
}

/* Ícones SVG do design system */
.ds-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-icon-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ds-icon-demo span {
  font-size: 0.6rem;
  color: var(--bmq-text-muted);
  text-align: center;
  max-width: 60px;
}

/* Comparação v1 vs v2 */
.ds-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ds-compare-box {
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bmq-divider);
}

.ds-compare-box--old {
  opacity: 0.6;
}

.ds-compare-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  display: block;
}

.ds-compare-label--old {
  color: #C83232;
}

.ds-compare-label--new {
  color: #2B8C4E;
}


/* ============================================================
   ELEMENTOR CORE OVERRIDES (SOFT ADAPTATION)
   Substituição nativa de variáveis para não quebrar o layout
============================================================ */

/* Injeta os tokens do BMQ direto nas variáveis globais que o Elementor usa */
:root {
  --e-global-color-primary: var(--bmq-navy-dark) !important;
  --e-global-color-secondary: var(--bmq-navy-mid) !important;
  --e-global-color-text: var(--bmq-text-body) !important;
  --e-global-color-accent: var(--bmq-gold) !important;
  /* O dourado fica restrito apenas a acentos nativos (ex: pequenos ícones/badges) */

  --e-global-typography-primary-font-family: var(--font-display) !important;
  --e-global-typography-secondary-font-family: var(--font-display) !important;
  --e-global-typography-text-font-family: var(--font-body) !important;
  --e-global-typography-accent-font-family: var(--font-display) !important;
}

/* Força as fontes base apenas se o widget não tiver nada setado */
.elementor-heading-title {
  font-family: var(--font-display);
}

.elementor-widget-text-editor {
  font-family: var(--font-body);
  line-height: 1.75;
}

.elementor-button {
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-sm);
  /* Bordas retas/pequenas do novo sistema */
  transition: transform var(--t-base), box-shadow var(--t-base);
  letter-spacing: 0.02em;
}

.elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Glassmorphism Classes Extras se precisarem utilizar no painel */
.bmq-glass {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-md) !important;
}

/* ============================================================
   FIX: CARDS DE SERVIÇO E NÚMEROS (CONTADORES)
   Forçando a estética nas estruturas soltas do Elementor
============================================================ */

/* 1. Mapeamento do Card de Números (Counters) -> bmq-stat-card */
.elementor-widget-counter .elementor-widget-container {
  background: var(--bmq-navy-dark) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--sp-6) var(--sp-4) !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: transform var(--t-base) !important;
}

.elementor-widget-counter .elementor-widget-container:hover {
  transform: translateY(-4px) !important;
}

.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: var(--bmq-white) !important;
  margin-bottom: var(--sp-2) !important;
}

.elementor-widget-counter .elementor-counter-number,
.elementor-widget-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter-number-suffix {
  color: var(--bmq-white) !important;
}

.elementor-widget-counter .elementor-counter-title {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  /* Destaque premium pro texto sob o número */
}

/* 2. Fix dos Ícones nos Cards de Serviços (Caixa de Imagem/Ícone) */
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon,
.elementor-widget-image-box .elementor-image-box-img {
  /*background-color: var(--bmq-off-white) !important;*/
  /*border-radius: var(--radius-sm) !important;*/
  padding: var(--sp-3) !important;
}



/* Forçando o fundo dos cards de serviço se eles não tiverem */
.elementor-widget-icon-box .elementor-widget-container,
.elementor-widget-image-box .elementor-widget-container {
  padding: var(--sp-6) !important;
  background: var(--bmq-white) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--bmq-divider) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Corrigindo a cor da coluna gigante azul (Advocacia Empresarial) do template antigo */
/* Recomenda-se tirar o fundo azul escuro do "Advocacia Empresarial" no painel,
   mas essa regra garante contraste do texto por garantia. */
.elementor-column[data-settings*="background_color"] .elementor-heading-title,
.elementor-column[data-settings*="background_color"] .elementor-widget-text-editor {
  color: inherit;
}

/* ============================================================
   FORÇA BRUTA: ANIQUILADOR DE DOURADO (ÍCONES DO ELEMENTOR)
============================================================ */

html body .elementor-widget-icon-box .elementor-icon i,
html body .elementor-widget-icon-box .elementor-icon svg,
html body.elementor-page .elementor-widget-icon-box .elementor-icon i {
  color: #ffffff !important;
  fill: #4A7AB5 !important;
  max-width: 28px !important;
  max-height: 28px !important;
}

/* Garante que o fundo das colunas ou cards percam a herança do ouro */
html body .bmq-service-card,
html body .elementor-widget-icon-box .elementor-widget-container {
  background: #ffffff !important;
  border: 1px solid #D4DBE8 !important;
  box-shadow: 0 1px 3px rgba(27, 45, 90, 0.06) !important;
}

/* ============================================================
   FIX DO CABEÇALHO PÚBLICO (HEADER) - BMQ
   Controlando os tamanhos absurdos do kit original
============================================================ */

/* Reduz o tamanho da sessão do Cabeçalho e aplica cor escura sólida */
html body [data-elementor-type="header"]>.elementor-section,
html body header.elementor-location-header .elementor-section {
  background: var(--bmq-navy-dark, #1B2D5A) !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  min-height: 80px !important;
  box-shadow: 0 4px 15px rgba(27, 45, 90, 0.4) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  align-items: center !important;
  z-index: 1000 !important;
}

/* Alinhamento ao centro da linha inteira */
html body [data-elementor-type="header"] .elementor-container {
  align-items: center !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}

/* Reduz o Logo gigante que está vazando da caixa */
html body [data-elementor-type="header"] .elementor-widget-image img {
  max-height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Fix pro Botão de Contact Us - Estilo Ghost Branco do Portfólio */
html body [data-elementor-type="header"] .elementor-widget-button .elementor-button {
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 12px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: var(--radius-sm, 4px) !important;
  transition: all 0.25s ease !important;
}

html body [data-elementor-type="header"] .elementor-widget-button .elementor-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* Corrige espaçamentos do widget pra tirar aquela folga de 200px */
html body [data-elementor-type="header"] .elementor-widget {
  margin-bottom: 0 !important;
}

/* ================================================================
   SERVICE LIST - Estilo Portfolio (Image 2)
   Para usar: Adicione um widget de HTML ou use classes no Elementor
================================================================ */
.bmq-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.bmq-service-item {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.bmq-service-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  /* Steel Blue Alpha */
  border-radius: var(--radius-sm, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bmq-blue-steel);
}

.bmq-service-item__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.bmq-service-item__content {
  display: flex;
  flex-direction: column;
}

.bmq-service-item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--bmq-white);
  margin-bottom: var(--sp-1);
}

.bmq-service-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}


/* ================================================================
       COMPONENT: BMQ WORK AREAS (VERSION 4 — BARRAS)
       Personalized for the "3 pillars" structure with animations.
    ================================================================ */
.bmq-column-card {
  background: rgba(255, 255, 255, 0.04);
  /* Subtil e flexível para assumir o fundo do container */
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 3px solid var(--bmq-navy-dark);
  transition: transform var(--t-base), box-shadow var(--t-base);
  height: 100%;
}

.bmq-column-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.08);
  /* Clareia levemente no hover */
  box-shadow: var(--shadow-lg);
}

/* Variações de Cores por Pilar */
.bmq-card--p1 {
  border-top-color: var(--bmq-navy-dark);
}

.bmq-card--p2 {
  border-top-color: var(--bmq-navy-mid);
}

.bmq-card--p3 {
  border-top-color: var(--bmq-blue-steel);
}

.bmq-column-header {
  padding: var(--sp-8) var(--sp-8) var(--sp-5);
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bmq-column-header svg,
.bmq-column-header i {
  width: 28px;
  height: 28px;
  margin-bottom: var(--sp-4);
  color: rgba(255, 255, 255, 0.85);
  stroke: rgba(255, 255, 255, 0.85);
  display: block;
}

/* Decoração: As 3 Barras BMQ (fiel ao logo) */
.bmq-column-header::after {
  content: '';
  position: absolute;
  top: 24px;
  right: 24px;
  width: 5px;
  height: 24px;
  background: var(--bmq-navy-dark);
  box-shadow: -7px 6px 0 0 var(--bmq-navy-mid), -14px 12px 0 0 var(--bmq-blue-steel);
  opacity: 0.8;
}

.bmq-column-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--bmq-white);
  line-height: 1.2;
}

/* Divisor discreto */
.bmq-column-card::after {
  content: '';
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 var(--sp-8);
}

.bmq-column-list {
  list-style: none !important;
  padding: var(--sp-4) var(--sp-8) var(--sp-8);
  margin: 0 !important;
  counter-reset: bmq-count;
}

.bmq-column-item {
  counter-increment: bmq-count;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
  display: flex;
  align-items: baseline;
  gap: 12px;
  transition: all var(--t-fast);
}

.bmq-column-item:last-child {
  border-bottom: none;
}

.bmq-column-item:hover {
  color: var(--bmq-white);
}

/* Numeração Automática (Padrão 01, 02...) */
.bmq-column-item::before {
  content: counter(bmq-count, decimal-leading-zero);
  font-size: 10px;
  font-weight: 600;
  color: var(--bmq-blue-steel);
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.bmq-column-item:hover::before {
  opacity: 1;
}

/* Ajustes de cor da numeração para pilar */
.bmq-card--p1 .bmq-column-item::before {
  color: var(--bmq-blue-steel);
}

.bmq-card--p2 .bmq-column-item::before {
  color: #7AAED8;
}

.bmq-card--p3 .bmq-column-item::before {
  color: #A8D0F0;
}

/* ================================================================
   COMPONENT: BMQ EDITABLE AREAS (VERSION 4 — PREMIUM)
   Designed to work with standard Elementor widgets.
================================================================ */
.bmq-card-v4 {
  overflow: hidden !important;
  position: relative !important;
  border-top: 3px solid var(--bmq-navy-dark) !important;
  transition: all var(--t-base) !important;
  border-radius: var(--radius-sm) !important;
}

.bmq-card-v4:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Variações por Pilar (Bordas) */
.bmq-card--p1 {
  border-top-color: var(--bmq-navy-dark) !important;
}

.bmq-card--p2 {
  border-top-color: var(--bmq-navy-mid) !important;
}

.bmq-card--p3 {
  border-top-color: var(--bmq-blue-steel) !important;
}

/* As 3 Barras Decorativas no Topo do Card */
.bmq-card-v4::after {
  content: '';
  position: absolute;
  top: 24px;
  right: 24px;
  width: 4px;
  height: 20px;
  background: var(--bmq-navy-dark);
  box-shadow: -6px 4px 0 0 var(--bmq-navy-mid), -12px 8px 0 0 var(--bmq-blue-steel);
  opacity: 0.8;
  z-index: 10;
}

/* Estilização da Lista (Numeração Automática) */
.bmq-list-v4 {
  counter-reset: bmq-count-v4;
}

.bmq-list-v4 .elementor-icon-list-item {
  counter-increment: bmq-count-v4;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.bmq-list-v4 .elementor-icon-list-item::before {
  content: counter(bmq-count-v4, decimal-leading-zero);
  font-size: 10px;
  font-weight: 700;
  color: var(--bmq-blue-steel);
  opacity: 0.4;
  font-family: var(--font-body);
  flex-shrink: 0;
}

.bmq-list-v4 .elementor-icon-list-item:hover::before {
  opacity: 1;
}

/* Forçar cores de pilar nos números */
.bmq-card--p1 .bmq-list-v4 .elementor-icon-list-item::before {
  color: var(--bmq-blue-steel);
}

.bmq-card--p2 .bmq-list-v4 .elementor-icon-list-item::before {
  color: #7AAED8;
}

.bmq-card--p3 .bmq-list-v4 .elementor-icon-list-item::before {
  color: #A8D0F0;
}

/* Ajuste fino dos widgets internos */
.bmq-card-v4 .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.bmq-card-v4 .elementor-button {
  margin-top: auto !important;
  /* Joga o botão pro fundo do card */
}

/* Estilo do ícone principal (Boxed) */
.bmq-card-v4 .elementor-widget-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: inline-flex !important;
  padding: 12px !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 25px !important;
  transition: all 0.3s ease !important;
}

.bmq-card-v4:hover .elementor-widget-icon {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.05);
}

/* ================================================================
   GLOBAL BUTTONS STANDARDIZATION (BMQ PREMIUM)
   Forces a clean, hollow aesthetic across all Elementor buttons.
================================================================ */
html body .elementor-button,
html body .elementor-button-link,
html body .elementor-widget-button .elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  /* Remove gradientes do Elementor */
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 32px !important;
  font-family: var(--font-display) !important;
  /* Montserrat */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 13px !important;
  transition: all var(--t-base) !important;
}

html body .elementor-button:hover,
html body .elementor-button:focus,
html body .elementor-button-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Garante a cor do texto no hover e estados ativos */
.elementor-button .elementor-button-text,
.elementor-button:hover .elementor-button-text {
  color: #FFFFFF !important;
}

/* Ajuste específico para garantir que o botão "CONTATO" e CTAs fiquem finos */
.elementor-location-header .elementor-button,
.elementor-widget-button .elementor-button {
  border-width: 1px !important;
}