/* ============================================================
   1. FONTES — Lufga (arquivos .woff em fonts/)
   ============================================================ */
/* Lufga — família unificada (arquivos .woff na mesma pasta) */

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/LufgaThin.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/LufgaExtraLight.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/LufgaLight.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/LufgaRegular.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/LufgaMedium.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/LufgaSemiBold.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/LufgaMedium.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/LufgaExtraBold.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/LufgaBlack.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/LufgaThinItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/LufgaExtraLightItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/LufgaLightItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/LufgaItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/LufgaMediumItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/LufgaSemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/LufgaMediumItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/LufgaExtraBoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Lufga";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/LufgaBlackItalic.woff") format("woff");
}

/* ============================================================
   2. LEGACY STYLES — container, glass-card, btn-evermonte
   ============================================================ */
/* Evermonte - Visual consistente do projeto */

/* Container padrão (sem margens percentuais) */
.container-evermonte {
  width: 100% !important;
  max-width: 1520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (min-width: 640px) {
  .container-evermonte {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (min-width: 768px) {
  .container-evermonte {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Tipografia — entrelinha média 1.3 (textos e títulos) */
:root {
  --font-lufga: "Lufga", sans-serif;
  --leading-text: 1.3;
  --leading-title: 1.3;
  /* Política de pesos: apenas ExtraLight / Light / Medium (máx. 500) */
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-medium: 500;
}

/* Gutter global (substitui margens percentuais no layout) */
.page-gutter {
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 640px) {
  .page-gutter {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (min-width: 768px) {
  .page-gutter {
    padding-left: 6%;
    padding-right: 6%;
  }
}
body {
  font-family: var(--font-lufga);
  line-height: var(--leading-text);
  font-weight: var(--fw-light);
}

/* Garante Lufga como fonte padrão em todo o projeto (Bootstrap pode sobrescrever em alguns elementos) */
html,
body {
  font-family: var(--font-lufga) !important;
}
button,
input,
textarea,
select {
  font-family: inherit;
}

/* ============================================================
   Política global de fontes (pesos permitidos)
   ============================================================ */
/* Texto padrão */
body,
p,
li,
span,
small,
label,
input,
textarea,
select,
button,
.btn {
  font-weight: var(--fw-light);
}

/* Destaques e títulos */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
strong,
b,
.font-semibold,
.fw-semibold {
  font-weight: var(--fw-medium) !important;
}

/* Extra light */
.font-extralight,
.fw-lighter {
  font-weight: var(--fw-extralight) !important;
}

/* Mapeia classes comuns para os pesos permitidos */
.font-medium,
.font-bold,
.fw-medium,
.fw-bold,
.fw-bolder {
  font-weight: var(--fw-medium) !important;
}

.font-normal,
.fw-normal {
  font-weight: var(--fw-light) !important;
}
.fw-light,
.font-light {
  font-weight: var(--fw-light) !important;
}

/* Font Awesome 6 (webfont): o corpo em 300 quebra sólido se o ícone herdar o peso */
.fa-solid,
.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.fa-regular,
.far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* Glass morphism — mesmo efeito dos .evermonte-card do hero (home) */
.evermonte-glass,
.glass-card {
  background: rgba(255, 255, 255, 0.008);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
}

/* Carrossel hero: dimensões fixas + snap (efeito de vidro = .evermonte-glass) */
.evermonte-card {
  width: 380px;
  min-width: 380px;
  max-width: 100%;
  min-height: 400px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .evermonte-card {
    min-width: 300px;
    min-height: 320px;
  }
}

.glass-input {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
}

/* Botões - estilo Evermonte
   2026-05-29 (pedido da cliente: padronização global de tipografia):
   peso REGULAR (400) em repouso, SEMIBOLD (600) no :hover.
   Pra evitar shift de largura quando o peso muda, o texto é embrulhado
   por `letter-spacing: 0` + uma técnica de `text-rendering` neutra. */
.btn-evermonte {
  height: 36px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-lufga);
  font-weight: 400;
  /* 2026-06-18: padrão global de botões — fonte 11px (pedido cliente, regra p/ todo o site).
     O header mantém seu próprio override (13px) p/ casar com os nav-links ao lado. */
  font-size: 11px;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease, font-weight 120ms ease;
}
.btn-evermonte:hover,
.btn-evermonte:focus-visible {
  font-weight: 600;
}
.btn-evermonte-filled {
  background: #d9d9d9;
  color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-evermonte-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-evermonte-outline:hover {
  background: #ffffff;
  color: #000000;
  border-color: rgba(255, 255, 255, 0.9);
}

/* Bordas sutis */
.border-evermonte {
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.border-evermonte-subtle {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Tema claro (service.html) */
.glass-card-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 25px;
}
.border-evermonte-light {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Cards na seção materials - fundo colorido, melhor contraste e blur visível */
.glass-card-materials {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 25px;
}

/* ============================================================
   3. TAILWIND COMPAT — utilitários que o Bootstrap 5 não tem
   ============================================================ */
/* ============================================================
   TAILWIND COMPAT — utilitários que existiam no Tailwind e que
   o Bootstrap 5 não tem equivalente 1:1.
   Este arquivo deve ser importado DEPOIS do bootstrap.min.css
   e ANTES de styles.css/evermonte-ds.css.
   Ele recria exatamente o que o Tailwind CDN gerava.
   ============================================================ */

/* -------- COLORS: neutral palette (Tailwind) ---------------- */
.text-neutral-300 {
  color: #d4d4d4 !important;
}
.text-neutral-400 {
  color: #a3a3a3 !important;
}
.text-neutral-500 {
  color: #737373 !important;
}
.text-neutral-600 {
  color: #525252 !important;
}
.text-neutral-700 {
  color: #404040 !important;
}

.bg-neutral-300 {
  background-color: #d4d4d4 !important;
}
.bg-neutral-400 {
  background-color: #a3a3a3 !important;
}
.bg-neutral-500 {
  background-color: #737373 !important;
}
.bg-neutral-700 {
  background-color: #404040 !important;
}
.bg-neutral-800 {
  background-color: #262626 !important;
}
.bg-neutral-900 {
  background-color: #171717 !important;
}

/* Borda branca com alfa (Tailwind border-white/10, /20, /30) */
.border-white-10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.border-white-15 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.border-white-20 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.border-white-30 {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* -------- GRADIENTS --------------------------------------- */
/* Tailwind: bg-gradient-to-b from-black/55 via-black/20 to-transparent */
.bg-gradient-header {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* -------- POINTER EVENTS --------------------------------- */
.pointer-events-none {
  pointer-events: none !important;
}
.pointer-events-auto {
  pointer-events: auto !important;
}

/* -------- LINE HEIGHTS (Tailwind) ------------------------- */
.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
.leading-normal {
  line-height: 1.5 !important;
}
.leading-relaxed {
  line-height: 1.625 !important;
}
.leading-loose {
  line-height: 2 !important;
}

/* -------- LETTER SPACING (tracking) ---------------------- */
.tracking-tighter {
  letter-spacing: -0.05em !important;
}
.tracking-tight {
  letter-spacing: -0.025em !important;
}
.tracking-normal {
  letter-spacing: 0 !important;
}
.tracking-wide {
  letter-spacing: 0.025em !important;
}
.tracking-wider {
  letter-spacing: 0.05em !important;
}
.tracking-widest {
  letter-spacing: 0.1em !important;
}

/* -------- FONT SIZES (Tailwind) --------------------------- */
/* text-xs=12px text-sm=14px text-base=16px text-lg=18px text-xl=20px
   text-2xl=24px text-3xl=30px text-4xl=36px text-5xl=48px text-6xl=60px */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem !important;
  line-height: 1;
}

/* Responsive text sizes: sm:text-*, md:text-*, lg:text-* */
@media (min-width: 576px) {
  .sm\:text-xs {
    font-size: 0.75rem !important;
  }
  .sm\:text-sm {
    font-size: 0.875rem !important;
  }
  .sm\:text-base {
    font-size: 1rem !important;
  }
  .sm\:text-lg {
    font-size: 1.125rem !important;
  }
  .sm\:text-xl {
    font-size: 1.25rem !important;
  }
  .sm\:text-2xl {
    font-size: 1.5rem !important;
  }
  .sm\:text-3xl {
    font-size: 1.875rem !important;
  }
  .sm\:text-4xl {
    font-size: 2.25rem !important;
  }
  .sm\:text-5xl {
    font-size: 3rem !important;
  }
}
@media (min-width: 768px) {
  .md\:text-xs {
    font-size: 0.75rem !important;
  }
  .md\:text-sm {
    font-size: 0.875rem !important;
  }
  .md\:text-base {
    font-size: 1rem !important;
  }
  .md\:text-lg {
    font-size: 1.125rem !important;
  }
  .md\:text-xl {
    font-size: 1.25rem !important;
  }
  .md\:text-2xl {
    font-size: 1.5rem !important;
  }
  .md\:text-3xl {
    font-size: 1.875rem !important;
  }
  .md\:text-4xl {
    font-size: 2.25rem !important;
  }
  .md\:text-5xl {
    font-size: 3rem !important;
  }
}
@media (min-width: 1024px) {
  .lg\:text-xs {
    font-size: 0.75rem !important;
  }
  .lg\:text-sm {
    font-size: 0.875rem !important;
  }
  .lg\:text-base {
    font-size: 1rem !important;
  }
  .lg\:text-lg {
    font-size: 1.125rem !important;
  }
  .lg\:text-xl {
    font-size: 1.25rem !important;
  }
  .lg\:text-2xl {
    font-size: 1.5rem !important;
  }
  .lg\:text-3xl {
    font-size: 1.875rem !important;
  }
  .lg\:text-4xl {
    font-size: 2.25rem !important;
  }
  .lg\:text-5xl {
    font-size: 3rem !important;
  }
}

/* -------- SPACING (Tailwind scale, 0.25rem = 4px por unidade) ---
   Bootstrap 5 vai até 5 (p-5 = 3rem). Tailwind vai muito além.
   Aqui recriamos as unidades que o projeto usa (2..36). --- */

/* gap-* */
.gap-1 {
  gap: 0.25rem !important;
} /* 4 */
.gap-2 {
  gap: 0.5rem !important;
} /* 8 */
.gap-3 {
  gap: 0.75rem !important;
} /* 12 */
.gap-4 {
  gap: 1rem !important;
} /* 16 */
.gap-5 {
  gap: 1.25rem;
} /* 20 */
.gap-6 {
  gap: 1.5rem;
} /* 24 */
.gap-8 {
  gap: 2rem;
} /* 32 */
.gap-10 {
  gap: 2.5rem !important;
} /* 40 */
.gap-12 {
  gap: 3rem;
} /* 48 */

/* space-y-* (margin-top em todos os filhos exceto o primeiro) */
.space-y-1 > * + * {
  margin-top: 0.25rem !important;
}
.space-y-2 > * + * {
  margin-top: 0.5rem !important;
}
.space-y-3 > * + * {
  margin-top: 0.75rem !important;
}
.space-y-4 > * + * {
  margin-top: 1rem !important;
}
.space-y-5 > * + * {
  margin-top: 1.25rem !important;
}
.space-y-6 > * + * {
  margin-top: 1.5rem !important;
}
.space-y-8 > * + * {
  margin-top: 2rem !important;
}

/* space-x-* (margin-left em todos os filhos exceto o primeiro) */
.space-x-1 > * + * {
  margin-left: 0.25rem !important;
}
.space-x-2 > * + * {
  margin-left: 0.5rem !important;
}
.space-x-3 > * + * {
  margin-left: 0.75rem !important;
}
.space-x-4 > * + * {
  margin-left: 1rem !important;
}
.space-x-6 > * + * {
  margin-left: 1.5rem !important;
}
.space-x-8 > * + * {
  margin-left: 2rem !important;
}

/* Padding escala Tailwind (substituindo BS5 que só vai até p-5) */
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem !important;
}
.p-8 {
  padding: 2rem;
}
.p-9 {
  padding: 2.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-14 {
  padding: 3.5rem !important;
}
.p-16 {
  padding: 4rem;
}
.p-20 {
  padding: 5rem !important;
}
.p-24 {
  padding: 6rem;
}
.p-28 {
  padding: 7rem;
}
.p-32 {
  padding: 8rem;
}
.p-36 {
  padding: 9rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem !important;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem !important;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem !important;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem !important;
}
.px-16 {
  padding-left: 4rem;
  padding-right: 4rem !important;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem !important;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem !important;
}
.py-10 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem !important;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem !important;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem !important;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem !important;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem !important;
}
.py-28 {
  padding-top: 7rem;
  padding-bottom: 7rem !important;
}
.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem !important;
}
.py-36 {
  padding-top: 9rem;
  padding-bottom: 9rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-10 {
  padding-top: 2.5rem !important;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-18 {
  padding-top: 4.5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-36 {
  padding-top: 9rem;
}

.pb-4 {
  padding-bottom: 1rem !important;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-10 {
  padding-bottom: 2.5rem !important;
}
.pb-12 {
  padding-bottom: 3rem !important;
}
.pb-16 {
  padding-bottom: 4rem !important;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-36 {
  padding-bottom: 9rem !important;
}
.pb-44 {
  padding-bottom: 11rem;
}

.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-6 {
  padding-right: 1.5rem !important;
}
.pr-8 {
  padding-right: 2rem !important;
}

/* Margin escala Tailwind além do BS5 */
.m-6 {
  margin: 1.5rem !important;
}
.m-8 {
  margin: 2rem !important;
}
.m-10 {
  margin: 2.5rem !important;
}
.m-12 {
  margin: 3rem !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}
.mt-8 {
  margin-top: 2rem !important;
}
.mt-10 {
  margin-top: 2.5rem !important;
}
.mt-12 {
  margin-top: 3rem !important;
}
.mt-16 {
  margin-top: 4rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}

/* -------- RESPONSIVE PADDING/MARGIN (sm: md: lg: xl:) -------- */
@media (min-width: 576px) {
  .sm\:p-6 {
    padding: 1.5rem !important;
  }
  .sm\:p-8 {
    padding: 2rem !important;
  }
  .sm\:p-10 {
    padding: 2.5rem !important;
  }
  .sm\:p-12 {
    padding: 3rem !important;
  }
  .sm\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .sm\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .sm\:py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .sm\:py-8 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .sm\:py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .sm\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .sm\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .sm\:pb-20 {
    padding-bottom: 5rem !important;
  }
  .sm\:pt-18 {
    padding-top: 4.5rem !important;
  }
  .sm\:flex-row {
    flex-direction: row !important;
  }
  .sm\:w-auto {
    width: auto !important;
  }
}
@media (min-width: 768px) {
  .md\:p-6 {
    padding: 1.5rem !important;
  }
  .md\:p-8 {
    padding: 2rem !important;
  }
  .md\:p-9 {
    padding: 2.25rem !important;
  }
  .md\:p-10 {
    padding: 2.5rem !important;
  }
  .md\:p-12 {
    padding: 3rem !important;
  }
  .md\:p-16 {
    padding: 4rem !important;
  }
  .md\:p-24 {
    padding: 6rem !important;
  }
  .md\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .md\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .md\:px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
  .md\:px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  .md\:py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .md\:py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .md\:py-8 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .md\:py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .md\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .md\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .md\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .md\:pt-6 {
    padding-top: 1.5rem !important;
  }
  .md\:pt-8 {
    padding-top: 2rem !important;
  }
  .md\:pt-12 {
    padding-top: 3rem !important;
  }
  .md\:pt-16 {
    padding-top: 4rem !important;
  }
  .md\:pt-20 {
    padding-top: 5rem !important;
  }
  .md\:pt-24 {
    padding-top: 6rem !important;
  }
  .md\:pt-28 {
    padding-top: 7rem !important;
  }
  .md\:pb-6 {
    padding-bottom: 1.5rem !important;
  }
  .md\:pb-8 {
    padding-bottom: 2rem !important;
  }
  .md\:pb-20 {
    padding-bottom: 5rem !important;
  }
  .md\:pb-24 {
    padding-bottom: 6rem !important;
  }
  .md\:pb-32 {
    padding-bottom: 8rem !important;
  }
  .md\:pl-6 {
    padding-left: 1.5rem !important;
  }
  .md\:pl-8 {
    padding-left: 2rem !important;
  }
  .md\:mb-8 {
    margin-bottom: 2rem !important;
  }
  .md\:mb-10 {
    margin-bottom: 2.5rem !important;
  }
  .md\:mb-12 {
    margin-bottom: 3rem !important;
  }
  .md\:mb-14 {
    margin-bottom: 3.5rem !important;
  }
  .md\:gap-5 {
    gap: 1.25rem !important;
  }
  .md\:gap-6 {
    gap: 1.5rem !important;
  }
  .md\:gap-8 {
    gap: 2rem !important;
  }
  .md\:flex-row {
    flex-direction: row !important;
  }
  .md\:items-center {
    align-items: center !important;
  }
  .md\:justify-between {
    justify-content: space-between !important;
  }
  .md\:rounded-3xl {
    border-radius: 1.5rem !important;
  }
  .md\:w-12 {
    width: 3rem !important;
  }
  .md\:h-12 {
    height: 3rem !important;
  }
  .md\:h-24 {
    height: 6rem !important;
  }
  .md\:grid {
    display: grid !important;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .lg\:p-8 {
    padding: 2rem !important;
  }
  .lg\:p-10 {
    padding: 2.5rem !important;
  }
  .lg\:p-12 {
    padding: 3rem !important;
  }
  .lg\:p-16 {
    padding: 4rem !important;
  }
  .lg\:p-24 {
    padding: 6rem !important;
  }
  .lg\:p-28 {
    padding: 7rem !important;
  }
  .lg\:px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  .lg\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .lg\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .lg\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .lg\:pt-24 {
    padding-top: 6rem !important;
  }
  .lg\:pt-32 {
    padding-top: 8rem !important;
  }
  .lg\:pb-32 {
    padding-bottom: 8rem !important;
  }
  .lg\:mb-12 {
    margin-bottom: 3rem !important;
  }
  .lg\:mb-16 {
    margin-bottom: 4rem !important;
  }
  .lg\:w-auto {
    width: auto !important;
  }
  .lg\:min-w-0 {
    min-width: 0 !important;
  }
  .lg\:grid {
    display: grid !important;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .lg\:snap-none {
    scroll-snap-type: none !important;
  }
  .lg\:overflow-x-visible {
    overflow-x: visible !important;
  }
}
@media (min-width: 1280px) {
  .xl\:p-32 {
    padding: 8rem !important;
  }
  .xl\:p-36 {
    padding: 9rem !important;
  }
  .xl\:pt-36 {
    padding-top: 9rem !important;
  }
  .xl\:pb-44 {
    padding-bottom: 11rem !important;
  }
}

/* -------- GRID (Tailwind) ------------------------------------
   BS5 tem o seu próprio grid (row/col). Aqui mantemos as
   classes CSS Grid do Tailwind pra não ter que reescrever layouts
   que já funcionam.
   IMPORTANTE: Sem !important nos grid-cols base, para que as variantes
   responsivas (sm:/md:/lg:) consigam sobrescrever o comportamento. */
.grid {
  display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (min-width: 576px) {
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* -------- WIDTH / HEIGHT UTILS (além do que BS5 tem) -------- */
.w-full {
  width: 100% !important;
}
.w-auto {
  width: auto;
}
.w-8 {
  width: 2rem !important;
}
.w-10 {
  width: 2.5rem !important;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem !important;
}
.h-full {
  height: 100% !important;
}
.h-auto {
  height: auto !important;
}
.h-8 {
  height: 2rem !important;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem !important;
}
.h-24 {
  height: 6rem;
}
.min-w-0 {
  min-width: 0;
}
.max-w-none {
  max-width: none;
}
.max-w-xs {
  max-width: 20rem !important;
}
.max-w-sm {
  max-width: 24rem !important;
}
.max-w-md {
  max-width: 28rem !important;
}
.max-w-lg {
  max-width: 32rem !important;
}
.max-w-xl {
  max-width: 36rem !important;
}
.max-w-2xl {
  max-width: 42rem !important;
}
.max-w-3xl {
  max-width: 48rem !important;
}
.max-w-4xl {
  max-width: 56rem !important;
}
.max-w-5xl {
  max-width: 64rem !important;
}
.max-w-6xl {
  max-width: 72rem !important;
}
.max-w-7xl {
  max-width: 80rem !important;
}

/* Tailwind arbitrary: max-w-[1280px] */
.max-w-1280 {
  max-width: 1280px !important;
}
.max-w-1520 {
  max-width: 1520px !important;
}

/* -------- FLEX UTILS (pra compatibilidade total) -------- */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}
.flex-auto {
  flex: 1 1 auto !important;
}
.flex-none {
  flex: none !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around !important;
}

/* -------- POSITION --------------------------------------- */
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.fixed {
  position: fixed !important;
}
.sticky {
  position: sticky !important;
}
.static {
  position: static !important;
}

.inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}
.top-0 {
  top: 0 !important;
}
.right-0 {
  right: 0 !important;
}
.bottom-0 {
  bottom: 0 !important;
}
.left-0 {
  left: 0 !important;
}

/* z-index extras */
.z-10 {
  z-index: 10 !important;
}
.z-20 {
  z-index: 20 !important;
}
.z-30 {
  z-index: 30 !important;
}
.z-40 {
  z-index: 40 !important;
}
.z-50 {
  z-index: 50 !important;
}
.z-90 {
  z-index: 90 !important;
}
.z-100 {
  z-index: 100 !important;
}

/* -------- DISPLAY ---------------------------------------- */
.block {
  display: block;
}
.inline-block {
  display: inline-block !important;
}
.inline {
  display: inline !important;
}
.hidden {
  display: none;
}

@media (min-width: 576px) {
  .sm\:block {
    display: block !important;
  }
  .sm\:hidden {
    display: none !important;
  }
  .sm\:flex {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  .md\:block {
    display: block !important;
  }
  .md\:hidden {
    display: none !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 1024px) {
  .lg\:block {
    display: block !important;
  }
  .lg\:hidden {
    display: none !important;
  }
  .lg\:flex {
    display: flex !important;
  }
}

/* -------- BORDERS --------------------------------------- */
.border {
  border-width: 1px !important;
  border-style: solid !important;
}
.border-0 {
  border-width: 0 !important;
}
.border-2 {
  border-width: 2px !important;
}
.border-t {
  border-top-width: 1px !important;
  border-top-style: solid !important;
}
.border-r {
  border-right-width: 1px;
  border-right-style: solid !important;
}
.border-b {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}
.border-l {
  border-left-width: 1px;
  border-left-style: solid !important;
}
.border-t-0 {
  border-top-width: 0 !important;
}
.border-b-0 {
  border-bottom-width: 0 !important;
}

.rounded {
  border-radius: 0.25rem !important;
}
.rounded-sm {
  border-radius: 0.125rem !important;
}
.rounded-md {
  border-radius: 0.375rem !important;
}
.rounded-lg {
  border-radius: 0.5rem !important;
}
.rounded-xl {
  border-radius: 0.75rem !important;
}
.rounded-2xl {
  border-radius: 1rem !important;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-full {
  border-radius: 9999px !important;
}
.rounded-none {
  border-radius: 0 !important;
}

/* -------- BACKGROUND / TEXT QUICK UTILS -------- */
.bg-black {
  background-color: #000 !important;
}
.bg-white {
  background-color: #fff !important;
}
.bg-transparent {
  background-color: transparent !important;
}

.text-black {
  color: #000 !important;
}
.text-white {
  color: #fff !important;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.uppercase {
  text-transform: uppercase !important;
}
.lowercase {
  text-transform: lowercase !important;
}
.capitalize {
  text-transform: capitalize !important;
}

.font-light {
  font-weight: 300 !important;
}
.font-normal {
  font-weight: 300 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 500 !important;
}
.font-bold {
  font-weight: 500 !important;
}
.italic {
  font-style: italic !important;
}

/* -------- OVERFLOW -------- */
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-auto {
  overflow: auto !important;
}
.overflow-visible {
  overflow: visible !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}

/* -------- OBJECT FIT -------- */
.object-cover {
  object-fit: cover !important;
}
.object-contain {
  object-fit: contain !important;
}
.object-center {
  object-position: center !important;
}

/* -------- OPACITY HELPERS -------- */
.opacity-0 {
  opacity: 0 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-70 {
  opacity: 0.7 !important;
}
.opacity-80 {
  opacity: 0.8 !important;
}
.opacity-100 {
  opacity: 1 !important;
}

.hover\:opacity-80:hover {
  opacity: 0.8 !important;
}
.hover\:opacity-100:hover {
  opacity: 1 !important;
}

/* -------- CURSOR -------- */
.cursor-pointer {
  cursor: pointer !important;
}

/* -------- TRANSITIONS (leve, pra hover cases comuns) -------- */
.transition {
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* ============================================================
   APPENDIX — classes descobertas no index.html
   Adicionadas para cobrir paletas, opacidades, snap, focus,
   hover states e arbitrary values usados no projeto.
   ============================================================ */

/* -------- COLORS: white com alfa (Tailwind text-white/XX) --- */
.text-white\/50 {
  color: rgba(255, 255, 255, 0.5) !important;
}
.text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
}
.text-white\/70 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.text-white\/75 {
  color: rgba(255, 255, 255, 0.75) !important;
}
.text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}
.text-white\/90 {
  color: rgba(255, 255, 255, 0.9) !important;
}
.text-white\/95 {
  color: rgba(255, 255, 255, 0.95) !important;
}

.bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.bg-white\/15 {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
.bg-black\/55 {
  background-color: rgba(0, 0, 0, 0.55) !important;
}
.bg-black\/70 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.border-white\/15 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.border-white\/20 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.border-white\/25 {
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.border-white\/30 {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* -------- NEUTRAL 100/200/600/700 complementares ----------- */
.text-neutral-100 {
  color: #f5f5f5 !important;
}
.text-neutral-200 {
  color: #e5e5e5 !important;
}
.bg-neutral-100 {
  background-color: #f5f5f5 !important;
}
.bg-neutral-200 {
  background-color: #e5e5e5 !important;
}

/* -------- ARBITRARY COLORS usado no projeto --------------- */
.bg-\[\#000000\] {
  background-color: #000000 !important;
}

/* -------- ARBITRARY FONT SIZES ---------------------------- */
.text-\[11px\] {
  font-size: 11px !important;
}
.text-\[12px\] {
  font-size: 12px !important;
}
.text-\[13px\] {
  font-size: 13px !important;
}

/* -------- ARBITRARY HEIGHTS / WIDTHS ---------------------- */
.h-\[500px\] {
  height: 500px !important;
}
.\!h-auto {
  height: auto !important;
}
.w-\[min\(60vw\,100\%\)\] {
  width: min(60vw, 100%) !important;
}

/* -------- ARBITRARY ROUNDED ------------------------------- */
.rounded-\[16px\] {
  border-radius: 16px !important;
}
.rounded-\[25px\] {
  border-radius: 25px !important;
}

/* -------- PLACEHOLDER COLORS ------------------------------ */
.placeholder-neutral-500::placeholder {
  color: #737373 !important;
}
.placeholder-neutral-400::placeholder {
  color: #a3a3a3 !important;
}
.placeholder-white\/50::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}
.placeholder-white\/60::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* -------- BACKDROP BLUR ----------------------------------- */
.backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.backdrop-blur {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.backdrop-blur-md {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.backdrop-blur-lg {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.backdrop-blur-xl {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* -------- HOVER STATES ----------------------------------- */
.hover\:bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.hover\:bg-white\/20:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.hover\:text-white:hover {
  color: #fff !important;
}
.hover\:text-neutral-300:hover {
  color: #d4d4d4 !important;
}
.hover\:text-neutral-400:hover {
  color: #a3a3a3 !important;
}
.hover\:underline:hover {
  text-decoration: underline !important;
}
.hover\:opacity-80:hover {
  opacity: 0.8 !important;
}
.hover\:opacity-100:hover {
  opacity: 1 !important;
}

/* -------- FOCUS STATES ----------------------------------- */
.focus\:outline-none:focus {
  outline: none !important;
}
.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(59, 130, 246, 0.5)) !important;
}
.focus\:ring-white\/25:focus {
  --tw-ring-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) !important;
}
.focus\:ring-white\/30:focus {
  --tw-ring-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* -------- TRANSITION TYPES ------------------------------- */
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.transition-opacity {
  transition-property: opacity !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.transition-transform {
  transition-property: transform !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.transition-all {
  transition-property: all !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* -------- SCROLL SNAP ------------------------------------ */
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness, mandatory) !important;
}
.snap-y {
  scroll-snap-type: y var(--tw-scroll-snap-strictness, mandatory) !important;
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
  scroll-snap-type: x mandatory !important;
}
.snap-start {
  scroll-snap-align: start !important;
}
.snap-center {
  scroll-snap-align: center !important;
}
.snap-end {
  scroll-snap-align: end !important;
}
.snap-none {
  scroll-snap-type: none;
}

/* -------- OVERFLOW ESPECÍFICOS --------------------------- */
.overflow-x-clip {
  overflow-x: clip;
}
.overflow-x-visible {
  overflow-x: visible;
}
.overflow-x-scroll {
  overflow-x: scroll !important;
}
.overflow-y-hidden {
  overflow-y: hidden !important;
}

/* -------- UNDERLINE OFFSET ------------------------------- */
.underline-offset-2 {
  text-underline-offset: 2px !important;
}
.underline-offset-4 {
  text-underline-offset: 4px !important;
}
.underline-offset-8 {
  text-underline-offset: 8px !important;
}

/* -------- MIN HEIGHT / WIDTH ---------------------------- */
.min-h-0 {
  min-height: 0 !important;
}
.min-h-full {
  min-height: 100% !important;
}
.min-h-screen {
  min-height: 100vh;
}
.min-w-0 {
  min-width: 0;
}
.min-w-full {
  min-width: 100% !important;
}
.max-w-full {
  max-width: 100% !important;
}

/* -------- SHADOW (além do BS5) --------------------------- */
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
.shadow-none {
  box-shadow: none !important;
}

/* -------- FLEX GROW / SHRINK ---------------------------- */
.flex-grow {
  flex-grow: 1 !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-shrink {
  flex-shrink: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.items-stretch {
  align-items: stretch !important;
}

/* -------- GAP COM EIXO ---------------------------------- */
.gap-x-1 {
  column-gap: 0.25rem !important;
}
.gap-x-2 {
  column-gap: 0.5rem !important;
}
.gap-x-3 {
  column-gap: 0.75rem !important;
}
.gap-x-4 {
  column-gap: 1rem !important;
}
.gap-x-6 {
  column-gap: 1.5rem !important;
}
.gap-x-8 {
  column-gap: 2rem !important;
}
.gap-y-1 {
  row-gap: 0.25rem !important;
}
.gap-y-2 {
  row-gap: 0.5rem !important;
}
.gap-y-3 {
  row-gap: 0.75rem !important;
}
.gap-y-4 {
  row-gap: 1rem !important;
}
.gap-y-6 {
  row-gap: 1.5rem !important;
}
.gap-y-8 {
  row-gap: 2rem;
}
.gap-16 {
  gap: 4rem;
}

/* -------- COL SPAN (grid) ------------------------------- */
.col-span-1 {
  grid-column: span 1 / span 1 !important;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4 !important;
}
.col-span-full {
  grid-column: 1 / -1;
}

/* -------- Z-INDEX extras / arbitrary --------------------- */
.z-0 {
  z-index: 0 !important;
}
.z-\[100\] {
  z-index: 100 !important;
}

/* -------- PADDINGS decimais (py-2.5) --------------------- */
.py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

/* -------- HEIGHT EXTRAS --------------------------------- */
.h-2 {
  height: 0.5rem !important;
}
.h-16 {
  height: 4rem !important;
}
.h-20 {
  height: 5rem !important;
}
.w-2 {
  width: 0.5rem !important;
}
.w-16 {
  width: 4rem !important;
}
.w-20 {
  width: 5rem !important;
}
.w-fit {
  width: fit-content !important;
}
.h-fit {
  height: fit-content !important;
}

/* -------- TEXT ALIGN RESPONSIVO ------------------------- */
@media (min-width: 768px) {
  .md\:text-right {
    text-align: right !important;
  }
  .md\:text-left {
    text-align: left !important;
  }
  .md\:text-center {
    text-align: center !important;
  }
  .md\:min-h-screen {
    min-height: 100vh !important;
  }
  .md\:pb-0 {
    padding-bottom: 0 !important;
  }
  .md\:pt-0 {
    padding-top: 0 !important;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .lg\:col-span-full {
    grid-column: 1 / -1 !important;
  }
  .lg\:gap-16 {
    gap: 4rem !important;
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .lg\:items-center {
    align-items: center !important;
  }
  .lg\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

@media (min-width: 768px) {
  .md\:gap-8 {
    gap: 2rem !important;
  }
  .md\:p-10 {
    padding: 2.5rem !important;
  }
  .md\:pt-24 {
    padding-top: 6rem !important;
  }
  .md\:pb-24 {
    padding-bottom: 6rem !important;
  }
}

@media (min-width: 576px) {
  .sm\:pt-20 {
    padding-top: 5rem !important;
  }
  .sm\:py-14 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .sm\:gap-12 {
    gap: 3rem !important;
  }
}

/* ============================================================
   APPENDIX 2 — classes descobertas ao migrar as demais páginas
   (service-detail, blog-post, sobre, contato, etc.)
   ============================================================ */

/* -------- Breakpoint 2xl (Tailwind = 1536px; BS5 não tem, criamos) */
@media (min-width: 1536px) {
  .\32xl\:p-36 {
    padding: 9rem !important;
  }
  .\32xl\:pb-52 {
    padding-bottom: 13rem !important;
  }
  .\32xl\:p-32 {
    padding: 8rem !important;
  }
  .\32xl\:px-24 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .\32xl\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/* -------- Completar lg: (1024px) ------------------------- */
@media (min-width: 1024px) {
  .lg\:absolute {
    position: absolute !important;
  }
  .lg\:relative {
    position: relative !important;
  }
  .lg\:border-l {
    border-left-width: 1px !important;
    border-left-style: solid !important;
  }
  .lg\:border-r {
    border-right-width: 1px !important;
    border-right-style: solid !important;
  }
  .lg\:border-neutral-200 {
    border-color: #e5e5e5 !important;
  }
  .lg\:border-neutral-300 {
    border-color: #d4d4d4 !important;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5 !important;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7 !important;
  }
  .lg\:col-span-12 {
    grid-column: span 12 / span 12 !important;
  }
  .lg\:gap-0 {
    gap: 0 !important;
  }
  .lg\:gap-y-16 {
    row-gap: 4rem !important;
  }
  .lg\:gap-y-8 {
    row-gap: 2rem !important;
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .lg\:justify-end {
    justify-content: flex-end !important;
  }
  .lg\:justify-start {
    justify-content: flex-start !important;
  }
  .lg\:max-h-\[min\(600px\,75vh\)\] {
    max-height: min(600px, 75vh) !important;
  }
  .lg\:max-w-\[35vw\] {
    max-width: 35vw !important;
  }
  .lg\:max-w-none {
    max-width: none !important;
  }
  .lg\:mb-14 {
    margin-bottom: 3.5rem !important;
  }
  .lg\:mb-24 {
    margin-bottom: 6rem !important;
  }
  .lg\:mb-28 {
    margin-bottom: 7rem !important;
  }
  .lg\:mt-0 {
    margin-top: 0 !important;
  }
  .lg\:pb-24 {
    padding-bottom: 6rem !important;
  }
  .lg\:pb-40 {
    padding-bottom: 10rem !important;
  }
  .lg\:pb-44 {
    padding-bottom: 11rem !important;
  }
  .lg\:pl-10 {
    padding-left: 2.5rem !important;
  }
  .lg\:pr-10 {
    padding-right: 2.5rem !important;
  }
  .lg\:pl-16 {
    padding-left: 4rem !important;
  }
  .lg\:pr-16 {
    padding-right: 4rem !important;
  }
  .lg\:pt-40 {
    padding-top: 10rem !important;
  }
  .lg\:px-16 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .lg\:px-20 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .lg\:py-28 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .lg\:py-36 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .lg\:text-\[2\.25rem\] {
    font-size: 2.25rem !important;
  }
  .lg\:text-\[2\.5rem\] {
    font-size: 2.5rem !important;
  }
  .lg\:text-\[3rem\] {
    font-size: 3rem !important;
  }
}

/* -------- Completar md: (768px) -------------------------- */
@media (min-width: 768px) {
  .md\:gap-12 {
    gap: 3rem !important;
  }
  .md\:gap-x-20 {
    column-gap: 5rem !important;
  }
  .md\:gap-y-14 {
    row-gap: 3.5rem !important;
  }
  .md\:h-10 {
    height: 2.5rem !important;
  }
  .md\:h-28 {
    height: 7rem !important;
  }
  .md\:h-72 {
    height: 18rem !important;
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem !important;
  }
  .md\:mb-20 {
    margin-bottom: 5rem !important;
  }
  .md\:mb-24 {
    margin-bottom: 6rem !important;
  }
  .md\:min-h-\[min\(360px\,52vh\)\] {
    min-height: min(360px, 52vh) !important;
  }
  .md\:pb-28 {
    padding-bottom: 7rem !important;
  }
  .md\:pb-40 {
    padding-bottom: 10rem !important;
  }
  .md\:pt-36 {
    padding-top: 9rem !important;
  }
  .md\:px-14 {
    padding-left: 3.5rem !important;
    padding-right: 3.5rem !important;
  }
  .md\:px-16 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .md\:py-18 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .md\:py-32 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
  .md\:rounded-\[52px\] {
    border-radius: 52px !important;
  }
  .md\:space-y-8 > * + * {
    margin-top: 2rem !important;
  }
  .md\:text-\[15px\] {
    font-size: 15px !important;
  }
  .md\:text-\[25px\] {
    font-size: 25px !important;
  }
  .md\:text-\[2\.75rem\] {
    font-size: 2.75rem !important;
  }
  .md\:text-\[2rem\] {
    font-size: 2rem !important;
  }
}

/* -------- Completar sm: (576px) -------------------------- */
@media (min-width: 576px) {
  .sm\:h-56 {
    height: 14rem !important;
  }
  .sm\:items-center {
    align-items: center !important;
  }
  .sm\:mb-16 {
    margin-bottom: 4rem !important;
  }
  .sm\:pb-24 {
    padding-bottom: 6rem !important;
  }
  .sm\:pt-16 {
    padding-top: 4rem !important;
  }
  .sm\:px-12 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  .sm\:text-\[15px\] {
    font-size: 15px !important;
  }
}

/* -------- xl: (1280px) — adicionais ---------------------- */
@media (min-width: 1280px) {
  .xl\:gap-20 {
    gap: 5rem !important;
  }
  .xl\:p-\[7\.5rem\] {
    padding: 7.5rem !important;
  }
  .xl\:pb-28 {
    padding-bottom: 7rem !important;
  }
  .xl\:pb-48 {
    padding-bottom: 12rem !important;
  }
  .xl\:pl-16 {
    padding-left: 4rem !important;
  }
  .xl\:pr-16 {
    padding-right: 4rem !important;
  }
  .xl\:px-24 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .xl\:px-\[4\.5rem\] {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
  .xl\:py-28 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .xl\:text-\[2\.5rem\] {
    font-size: 2.5rem !important;
  }
  .xl\:px-16 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .xl\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/* ============================================================
   APPENDIX 3 — últimos tokens Tailwind identificados no scan final
   (gradientes multi-parte, leading/tracking arbitrary, heights
   pequenas e comuns, self-*, sr-only, scale, shrink, seletores
   de seleção, shadows arbitrários)
   ============================================================ */

/* -------- Arbitrary font-sizes -------- */
.text-\[15px\] {
  font-size: 15px;
}
.text-\[clamp\(1\.25rem\,2\.8vw\,2rem\)\] {
  font-size: clamp(1.25rem, 2.8vw, 2rem) !important;
}
.text-\[clamp\(3\.25rem\,8\.5vw\,6\.25rem\)\] {
  font-size: clamp(3.25rem, 8.5vw, 6.25rem) !important;
}

/* -------- Arbitrary leading (line-height) -------- */
.leading-\[0\.92\] {
  line-height: 0.92 !important;
}
.leading-\[1\.08\] {
  line-height: 1.08 !important;
}
.leading-\[1\.1\] {
  line-height: 1.1 !important;
}
.leading-\[1\.25\] {
  line-height: 1.25 !important;
}
.leading-\[1\.4\] {
  line-height: 1.4 !important;
}
.leading-\[1\.5\] {
  line-height: 1.5 !important;
}

/* -------- Arbitrary tracking (letter-spacing) -------- */
.tracking-\[0\] {
  letter-spacing: 0 !important;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em !important;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em !important;
}

/* -------- Arbitrary max-widths / min-heights / heights -------- */
.max-w-\[1280px\] {
  max-width: 1280px !important;
}
.max-w-\[1400px\] {
  max-width: 1400px !important;
}
.max-w-\[52ch\] {
  max-width: 52ch !important;
}
.max-w-\[min\(100\%\,1520px\)\] {
  max-width: min(100%, 1520px) !important;
}
.max-h-\[min\(520px\,65vh\)\] {
  max-height: min(520px, 65vh) !important;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem !important;
}
.min-h-\[44px\] {
  min-height: 44px !important;
}
.min-h-\[48px\] {
  min-height: 48px !important;
}
.min-h-\[56px\] {
  min-height: 56px !important;
}
.min-h-\[90vh\] {
  min-height: 90vh !important;
}
.min-h-\[min\(320px\,52vh\)\] {
  min-height: min(320px, 52vh) !important;
}
.w-\[min\(640px\,72\%\)\] {
  width: min(640px, 72%) !important;
}

/* -------- Arbitrary border-radius -------- */
.rounded-\[28px\] {
  border-radius: 28px !important;
}
.rounded-\[40px\] {
  border-radius: 40px !important;
}

/* -------- Heights pequenas / decimais -------- */
.h-1\.5 {
  height: 0.375rem !important;
}
.h-9 {
  height: 2.25rem !important;
}
.h-11 {
  height: 2.75rem !important;
}
.h-40 {
  height: 10rem;
}
.h-px {
  height: 1px !important;
}
.w-1\.5 {
  width: 0.375rem !important;
}
.w-11 {
  width: 2.75rem !important;
}
.w-px {
  width: 1px !important;
}

/* -------- Spacing pequenos -------- */
.mb-0\.5 {
  margin-bottom: 0.125rem !important;
}
.pt-0\.5 {
  padding-top: 0.125rem !important;
}
.pt-14 {
  padding-top: 3.5rem !important;
}
.pl-5 {
  padding-left: 1.25rem !important;
}
.ml-1 {
  margin-left: 0.25rem !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-2 {
  margin-right: 0.5rem !important;
}

/* -------- Bottom / right (para posicionamento absoluto) -------- */
.bottom-10 {
  bottom: 2.5rem !important;
}
.right-10 {
  right: 2.5rem !important;
}
.inset-x-0 {
  left: 0 !important;
  right: 0 !important;
}

/* -------- Background gradient direcionais (Tailwind) -------- */
/* from-* / via-* / to-* trabalham via variáveis em Tailwind real;
   aqui recriamos os casos concretos usados. */
.bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    var(
      --tw-gradient-stops,
      var(--tw-gradient-from, transparent),
      var(--tw-gradient-to, transparent)
    )
  ) !important;
}
.bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    var(
      --tw-gradient-stops,
      var(--tw-gradient-from, transparent),
      var(--tw-gradient-to, transparent)
    )
  ) !important;
}
/* Para os gradientes usados no projeto, gerar as combinações explícitas: */
.bg-gradient-to-b.from-black\/55.via-black\/20.to-transparent {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
.bg-gradient-to-b.from-black\/55.via-black\/60.to-transparent,
.bg-gradient-to-b.from-black\/55.via-black\/20.to-transparent {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
.bg-gradient-to-b.from-transparent.via-black\/20.to-black {
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 50%,
    #000 100%
  ) !important;
}
.bg-gradient-to-t.from-black.to-transparent {
  background-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
.bg-gradient-to-t.from-black\/70.to-transparent {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
/* Classes isoladas (alguns templates usam só as partes) */
.from-black {
  background-color: #000;
}
.from-black\/55 {
} /* usado em conjunto com bg-gradient-to-b */
.from-transparent {
}
.via-black\/20 {
}
.via-black\/60 {
}
.to-transparent {
}
.to-black {
}

/* -------- Background helpers -------- */
.bg-cover {
  background-size: cover !important;
}
.bg-center {
  background-position: center !important;
}
.bg-black\/45 {
  background-color: rgba(0, 0, 0, 0.45) !important;
}
.bg-white\/40 {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* -------- Arbitrary bg color -------- */
.bg-\[\#000000\] {
  background-color: #000000 !important;
}

/* -------- Borders extras -------- */
.border-neutral-200\/80 {
  border-color: rgba(229, 229, 229, 0.8) !important;
}
.border-neutral-300 {
  border-color: #d4d4d4;
}
.border-neutral-300\/80 {
  border-color: rgba(212, 212, 212, 0.8) !important;
}
.border-neutral-400 {
  border-color: #a3a3a3 !important;
}
.border-white\/40 {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* -------- Hover backgrounds extras -------- */
.hover\:bg-neutral-100\/80:hover {
  background-color: rgba(245, 245, 245, 0.8) !important;
}
.hover\:bg-neutral-300:hover {
  background-color: #d4d4d4 !important;
}

/* -------- Text extras -------- */
.text-white\/55 {
  color: rgba(255, 255, 255, 0.55) !important;
}
.text-white\/85 {
  color: rgba(255, 255, 255, 0.85) !important;
}
.text-neutral-800 {
  color: #262626 !important;
}
.text-neutral-900 {
  color: #171717 !important;
}

/* -------- Self align -------- */
.self-auto {
  align-self: auto !important;
}
.self-start {
  align-self: flex-start !important;
}
.self-end {
  align-self: flex-end !important;
}
.self-center {
  align-self: center !important;
}
.self-stretch {
  align-self: stretch !important;
}

/* -------- Shrink (Tailwind) -------- */
.shrink-0 {
  flex-shrink: 0 !important;
}
.shrink {
  flex-shrink: 1 !important;
}

/* -------- Sr-only -------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -------- Transform scale -------- */
.scale-100 {
  transform: scale(1) !important;
}
.scale-105 {
  transform: scale(1.05) !important;
}
.scale-110 {
  transform: scale(1.1) !important;
}

/* -------- Opacity (completar) -------- */
.opacity-90 {
  opacity: 0.9 !important;
}
.opacity-95 {
  opacity: 0.95 !important;
}

/* -------- Selection colors (Tailwind) -------- */
.selection\:bg-neutral-800 ::selection,
.selection\:bg-neutral-800::selection {
  background-color: #262626 !important;
}
.selection\:text-white ::selection,
.selection\:text-white::selection {
  color: #ffffff !important;
}

/* -------- Font family -------- */
.font-sans {
  font-family: "Lufga", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif !important;
}
.font-serif {
  font-family: ui-serif, Georgia, "Times New Roman", serif !important;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* -------- Z-index arbitrary -------- */
.z-\[1\] {
  z-index: 1 !important;
}
.z-\[2\] {
  z-index: 2 !important;
}

/* -------- Shadow arbitrary (Tailwind patterns usados) -------- */
.shadow-\[0_4px_40px_rgba\(0\,0\,0\,0\.06\)\] {
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06) !important;
}
.shadow-\[0_24px_80px_rgba\(0\,0\,0\,0\.18\)\] {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
}

/* -------- Overflow extras -------- */
.overflow-x-hidden {
  overflow-x: hidden !important;
}

/* -------- Classes de d-grid responsivo que a migração gerou -------- */
/* d-lg-grid / d-md-grid / d-sm-grid criadas automaticamente pelo CLASS_MAP */
@media (min-width: 576px) {
  .d-sm-grid {
    display: grid !important;
  }
}
@media (min-width: 768px) {
  .d-md-grid {
    display: grid !important;
  }
}
@media (min-width: 1024px) {
  .d-lg-grid {
    display: grid !important;
  }
}
@media (min-width: 1280px) {
  .d-xl-grid {
    display: grid !important;
  }
}

/* align-items-md-center etc vieram da conversão */
@media (min-width: 576px) {
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
}
@media (min-width: 768px) {
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
}
@media (min-width: 1024px) {
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
}

/* ============================================================
   4. EVERMONTE DESIGN SYSTEM
   ============================================================ */
/* ============================================================
   EVERMONTE DS — COMPONENTES COMPARTILHADOS
   Importe este arquivo DEPOIS do styles.css em todas as páginas.

   Contém:
   - Logo stack (tagline abaixo do logo)
   - Header submenu (dropdown)
   - Mobile hamburger + drawer (com botão X)
   - Sliders horizontais (news, materials)
   - Tabs responsivas com JS
   - Hover unificado dos botões
   - Checkbox inline
   - Utilitários
   ============================================================ */

:root {
  --evm-gutter-mobile: 24px;
  --evm-gutter-tablet: 32px;
  --evm-radius-card: 16px;
  --evm-radius-pill: 100px;
  --evm-control-h: 41px;
  --evm-ink: #ffffff;
  --evm-ink-muted: #d4d4d4;
  --evm-ink-subtle: #a3a3a3;
  --evm-glass-border: rgba(255, 255, 255, 0.3);
  --evm-glass-bg-medium: rgba(255, 255, 255, 0.06);
  --evm-brand: #7da9b5;
  --evm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   1. LOGO STACK — logo + tagline abaixo, alinhada à direita
   ============================================================ */
.evm-logo-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end; /* tagline alinhada à DIREITA do logo */
  line-height: 1;
  gap: 2px;
  text-decoration: none;
}
.evm-logo-stack img {
  height: 32px;
  display: block;
  margin-bottom: 3px;
}
.evm-logo-stack .evm-tagline {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: 7px;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Em mobile a tagline pode ser suprimida se apertar */
@media (max-width: 380px) {
  .evm-logo-stack img {
    height: 26px;
  }
  .evm-logo-stack .evm-tagline {
    font-size: 7px;
  }
}

/* ============================================================
   2. HEADER NAV DESKTOP + SUBMENU
   ============================================================ */
.evm-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.evm-nav-item {
  position: relative;
}
.evm-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 41px;
  padding: 0 20px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--evm-ease),
    color 200ms var(--evm-ease), border-color 200ms var(--evm-ease);
}
.evm-nav-link:hover,
.evm-nav-item.is-open .evm-nav-link {
  background: #ffffff;
  color: #000000;
  border-color: rgba(255, 255, 255, 0.9);
}
.evm-nav-link .evm-caret {
  width: 10px;
  height: 10px;
  transition: transform 200ms var(--evm-ease);
  display: inline-block;
  flex-shrink: 0;
}
.evm-nav-item.is-open .evm-nav-link .evm-caret {
  transform: rotate(180deg);
}

/* 2026-06-02: header mais compacto (pedido cliente — menu mais discreto,
   ocupando menos espaço vertical no topo, sem perder legibilidade).
   2026-06-17: cliente pediu reduzir ainda mais — header mais delicado/sofisticado
   (altura, fontes, espaçamentos internos e proporção da logo). */
.evm-site-header.evm-hero-header,
.evm-site-header {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.evm-site-header .evm-logo-stack img { height: 21px; margin-bottom: 2px; }
.evm-site-header .evm-logo-stack .evm-tagline { font-size: 6px; letter-spacing: .14em; }
.evm-site-header .evm-nav { gap: 4px; }
/* 2026-06-19 (e-mail Andreia — ajuste home/header global): botões mais baixos/achatados,
   visual mais delicado e elegante. Altura 32px → 28px (nav-links e CTA), padding lateral
   levemente reduzido p/ manter a proporção da pílula. */
.evm-site-header .evm-nav-link { height: 28px; padding: 0 12px; font-size: 13px; }
.evm-site-header .evm-nav-link .evm-caret { width: 9px; height: 9px; }
.evm-site-header .header-actions-desktop { gap: .75rem !important; }
.evm-site-header .header-actions-desktop .btn-evermonte { height: 28px; font-size: 13px; }
.evm-site-header .evm-header-login { font-size: 13px !important; }

/* Submenu — aparece abaixo do link (dropdown simples, lista vertical) */
.evm-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  background: rgba(21, 21, 21, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms var(--evm-ease), transform 200ms var(--evm-ease),
    visibility 200ms;
  z-index: 40;
}
.evm-nav-item.is-open .evm-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.evm-submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: #ffffff !important;
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 150ms var(--evm-ease),
    color 150ms var(--evm-ease);
}
.evm-submenu a:hover,
.evm-submenu a:focus-visible {
  background: #ffffff;
  color: #000000 !important;
  outline: none;
}
.evm-submenu-heading {
  padding: 10px 14px 4px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a3a3a3;
  font-weight: 300;
}

/* Mega-menu de Soluções — só os 4 serviços principais em uma linha
   (cada coluna = título + descrição resumida, card clicável) */
.evm-megamenu {
  left: 0;
  min-width: 0;
  width: min(900px, 88vw);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.evm-megamenu .evm-mega-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 14px 16px;
  border-radius: 14px;
}
.evm-megamenu .evm-mega-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
}
.evm-megamenu .evm-mega-card-desc {
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
.evm-megamenu .evm-mega-card:hover .evm-mega-card-title,
.evm-megamenu .evm-mega-card:focus-visible .evm-mega-card-title,
.evm-megamenu .evm-mega-card:hover .evm-mega-card-desc,
.evm-megamenu .evm-mega-card:focus-visible .evm-mega-card-desc {
  color: #000000;
}

/* Esconde submenus em mobile — usamos o drawer */
@media (max-width: 767px) {
  .evm-nav {
    display: none !important;
  }
  /* Esconde ações desktop (LOGIN + Fale conosco) em mobile, usamos o drawer */
  .header-actions-desktop {
    display: none !important;
  }

  /* Garante que o container do logo ocupe só o necessário,
       deixando espaço para o hamburger ao lado */
  #header > div > div:first-child {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    flex: 1 1 auto;
  }
  /* O hamburger não encolhe */
  #header .evm-hamburger {
    flex-shrink: 0;
  }
}

/* Força flex no container raiz do header (blindagem contra Tailwind lento) */
#header > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ============================================================
   3. HAMBURGER + DRAWER MOBILE (com X visível pra fechar)
   ============================================================ */
.evm-hamburger {
  display: none;
  width: 41px;
  height: 41px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms var(--evm-ease),
    border-color 200ms var(--evm-ease);
  flex-shrink: 0;
}
.evm-hamburger:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
}
.evm-hamburger:hover .evm-hamburger-line {
  background: #000;
}
.evm-hamburger-icon {
  width: 18px;
  height: 12px;
  position: relative;
}
.evm-hamburger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 250ms var(--evm-ease), opacity 200ms var(--evm-ease),
    background-color 200ms var(--evm-ease);
}
.evm-hamburger-line:nth-child(1) {
  top: 0;
}
.evm-hamburger-line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.evm-hamburger-line:nth-child(3) {
  bottom: 0;
}

@media (max-width: 767px) {
  .evm-hamburger {
    display: inline-flex;
  }
}

/* Drawer */
.evm-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--evm-ease);
}
.evm-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}
.evm-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.evm-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: rgba(21, 21, 21, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateX(100%);
  transition: transform 320ms var(--evm-ease);
  display: flex;
  flex-direction: column;
}
.evm-drawer.is-open .evm-drawer-panel {
  transform: translateX(0);
}

/* Header do drawer (logo + botão X) */
.evm-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.evm-drawer-close {
  width: 41px;
  height: 41px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms var(--evm-ease),
    border-color 200ms var(--evm-ease);
  color: #ffffff;
  flex-shrink: 0;
}
.evm-drawer-close:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
  color: #000;
}
.evm-drawer-close svg {
  width: 14px;
  height: 14px;
}

/* Corpo do drawer (scrollável) */
.evm-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evm-drawer-nav-item {
  width: 100%;
}

.evm-drawer-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 17px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background-color 200ms var(--evm-ease),
    color 200ms var(--evm-ease), border-color 200ms var(--evm-ease);
}
.evm-drawer-nav-btn:hover,
.evm-drawer-nav-btn:focus-visible {
  background: #ffffff;
  color: #000000;
  border-color: rgba(255, 255, 255, 0.9);
  outline: none;
}
.evm-drawer-nav-btn .evm-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 250ms var(--evm-ease);
}
.evm-drawer-nav-item.is-open .evm-drawer-nav-btn .evm-caret {
  transform: rotate(180deg);
}

/* Submenu do drawer mobile (accordion) */
.evm-drawer-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--evm-ease);
}
.evm-drawer-nav-item.is-open .evm-drawer-submenu {
  max-height: 600px;
}
.evm-drawer-submenu-inner {
  padding: 4px 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evm-drawer-submenu-inner a {
  display: block;
  padding: 10px 14px;
  color: #d4d4d4;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 12px;
  font-family: "Lufga", sans-serif;
  transition: background-color 150ms var(--evm-ease),
    color 150ms var(--evm-ease);
}
.evm-drawer-submenu-inner a:hover,
.evm-drawer-submenu-inner a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

/* Divisor + meta + CTAs finais do drawer */
.evm-drawer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 12px 16px;
}
.evm-drawer-meta {
  padding: 0 16px;
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #a3a3a3;
  margin-bottom: 12px;
}
.evm-drawer-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 8px;
}
.evm-drawer-ctas > a,
.evm-drawer-ctas > button {
  text-decoration: none;
  width: 100%;
  justify-content: center;
}

/* ============================================================
   4. SLIDER HORIZONTAL GENÉRICO (materials, news, etc.)
   Uso: <div class="evm-slider" data-slider><div class="evm-slider-track">... cards ...</div><div class="evm-slider-dots"></div></div>
   O JS popula os dots automaticamente.
   ============================================================ */
.evm-slider {
  width: 100%;
  position: relative;
}
.evm-slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 12px;
}
.evm-slider-track::-webkit-scrollbar {
  display: none;
}
.evm-slider-track::before,
.evm-slider-track::after {
  content: "";
  flex: 0 0 24px;
}
.evm-slider-card {
  flex: 0 0 calc(100vw - 64px);
  max-width: 420px;
  scroll-snap-align: start;
}
.evm-slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
/* Solutions-dots: mais espaço e posição garantida */
.solutions-dots.evm-slider-dots {
  margin-top: 24px;
  margin-bottom: 8px;
  min-height: 10px;
}
.evm-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms var(--evm-ease),
    border-color 200ms var(--evm-ease);
  padding: 0;
}
.evm-slider-dot.is-active {
  background: #ffffff;
  border-color: #ffffff;
}

/* Em desktop, o slider vira grid (sem scroll horizontal) */
@media (min-width: 1024px) {
  .evm-slider-track {
    display: grid;
    grid-template-columns: repeat(var(--evm-slider-cols, 3), minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
    padding: 0;
  }
  .evm-slider-track::before,
  .evm-slider-track::after {
    display: none;
  }
  .evm-slider-card {
    flex: initial;
    max-width: none;
    width: auto;
  }
  .evm-slider-dots {
    display: none;
  }
}

/* Variante para telas médias (tablet) — 2 por vez no grid */
@media (min-width: 768px) and (max-width: 1023px) {
  .evm-slider-card {
    flex: 0 0 calc(50% - 20px);
  }
}

/* ============================================================
   4b. SLIDER VARIANTE — dentro do materials (fundo azul sólido)
   ============================================================ */
/* Cards do materials têm vidro mais opaco para contraste com o azul sólido */
.materials-slider .glass-card-materials {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Padding interno do track no mobile para respeitar gutter da section */
@media (max-width: 1023px) {
  .materials-slider .evm-slider-track::before,
  .materials-slider .evm-slider-track::after {
    flex: 0 0 24px;
  }
  .materials-slider .evm-slider-track {
    scroll-padding-left: 24px;
  }
}

/* Em desktop, o materials-slider usa grid com padding lateral */
@media (min-width: 1024px) {
  .materials-slider .evm-slider-track {
    padding: 0 72px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .materials-slider .evm-slider-track {
    padding: 0 48px;
  }
}

/* Dots do materials: brancos para contrastar com fundo azul */
.materials-slider .evm-slider-dot {
  border-color: rgba(255, 255, 255, 0.6);
}
.materials-slider .evm-slider-dot.is-active {
  background: #ffffff;
  border-color: #ffffff;
}

/* ============================================================
   4d. SETAS DE NAVEGAÇÃO (carrosséis da home)
   Injetadas pelo evermonte-ds.js (addArrows). Só aparecem quando
   há overflow horizontal; somem nos extremos.
   ============================================================ */
.evm-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 200ms var(--evm-ease), opacity 200ms var(--evm-ease);
}
.evm-slider.has-arrows .evm-slider-arrow,
.evm-hero-slider.has-arrows .evm-slider-arrow {
  display: inline-flex;
}
.evm-slider-arrow--prev { left: 6px; }
.evm-slider-arrow--next { right: 6px; }
.evm-slider-arrow:hover { background: rgba(0, 0, 0, 0.85); }
.evm-slider-arrow.is-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .evm-slider-arrow { display: none !important; }
}

/* ============================================================
   4c. BLOG GRID → SLIDER em mobile
   Para seções do blog-list que já usam `grid` no markup.
   Em mobile vira scroll horizontal; em desktop continua grid.
   ============================================================ */
@media (max-width: 767px) {
  .blog-grid-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 4px 0 12px !important;
    margin-left: -24px !important; /* anula o page-gutter do pai */
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    scrollbar-width: none;
  }
  .blog-grid-slider::-webkit-scrollbar {
    display: none;
  }
  .blog-grid-slider > * {
    flex: 0 0 calc(100vw - 64px) !important;
    max-width: 360px !important;
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* Dots para blog grid slider em mobile */
.blog-grid-slider-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .blog-grid-slider-dots {
    display: flex;
  }
}

/* ============================================================
   5. CHECKBOX INLINE (newsletter)
   ============================================================ */
.evm-checkbox {
  display: flex;
  align-items: flex-start; /* topo dos dois alinhado, mas inline */
  gap: 12px;
  cursor: pointer;
  font-family: "Lufga", sans-serif;
}
.evm-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms var(--evm-ease),
    border-color 150ms var(--evm-ease);
  position: relative;
  margin-top: 2px; /* alinhamento ótico com a primeira linha do texto */
}
.evm-checkbox input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.evm-checkbox input[type="checkbox"]:checked {
  background: #ffffff;
  border-color: #ffffff;
}
.evm-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.evm-checkbox-label {
  font-size: 13px;
  font-weight: 300;
  color: #a3a3a3;
  line-height: 1.5;
  text-align: left;
  flex: 1;
}

/* ============================================================
   6. HOVER UNIFICADO — todos os botões btn-evermonte*
   Aplica hover branco com texto preto em TODAS as variantes.
   ============================================================ */
.btn-evermonte,
a.btn-evermonte {
  transition: background-color 200ms var(--evm-ease),
    color 200ms var(--evm-ease), border-color 200ms var(--evm-ease) !important;
  text-decoration: none;
}
.btn-evermonte:hover,
.btn-evermonte-outline:hover,
.btn-evermonte-filled:hover,
.btn-evermonte-filled-white:hover,
a.btn-evermonte:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================
   7. TABS — wrapper com fade lateral + hint "arraste"
   ============================================================ */
.evm-tabs-wrapper {
  position: relative;
  width: 100%;
}
/* Fades laterais sinalizando conteúdo cortado */
.evm-tabs-wrapper::before,
.evm-tabs-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}
.evm-tabs-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
}
.evm-tabs-wrapper::after {
  right: 0;
  background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
}
@media (min-width: 768px) {
  /* Em desktop não tem scroll, então sem fades */
  .evm-tabs-wrapper::before,
  .evm-tabs-wrapper::after {
    display: none;
  }
}

.evm-tabs-hint {
  display: none;
  font-family: "Lufga", sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #a3a3a3;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 8px 0 20px;
}
@media (max-width: 767px) {
  .evm-tabs-hint {
    display: block;
  }
}

/* ============================================================
   8. MICRO-UTILITÁRIOS
   ============================================================ */

/* Normaliza raios dos cards no projeto inteiro (DS v1.2 = 16px global).
   Estendido em 2026-05-29 para também cobrir glass-card-light (pages de
   tema claro) e glass-input — pedido da cliente: padronização global. */
.glass-card,
.evermonte-glass,
.evermonte-card,
.glass-card-materials,
.glass-card-light,
.glass-input {
  border-radius: 16px !important;
}

/* Padronização global de peso de botões (DS v1.2, 2026-05-29).
   Repouso = 400 (regular) · Hover = 600 (semibold).
   Cobre .btn-evermonte e botões Bootstrap pill usados em service/* blades
   (que tinham font-weight: 500 inline). !important pra vencer os inline. */
.btn-evermonte,
.btn.rounded-pill {
  font-weight: 400 !important;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease, font-weight 120ms ease;
}
.btn-evermonte:hover,
.btn-evermonte:focus-visible,
.btn.rounded-pill:hover,
.btn.rounded-pill:focus-visible {
  font-weight: 600 !important;
}

/* Bullets das listas em conteúdo enriquecido das páginas de soluções.
   O markup vem do CMS:
     <li class="d-flex ..."><span class="border rounded-3 bg-white"
                                  style="width: 48px; height: 48px"></span>
                            <p>...</p></li>
   Os 48×48px ficaram pesados pra leitura. Pedido da cliente 2026-05-29:
   reduzir pra 16×16px e tornar o marcador mais discreto. Como o style
   inline tem precedência, precisa de !important pra sobrescrever. */
li.d-flex > span[aria-hidden="true"].border.bg-white,
li.d-flex > span[aria-hidden="true"][class*="border"][class*="bg-white"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 4px !important;
  margin-top: 6px !important;
}

/* Links internos de cards — sempre brancos */
.glass-card a:not(.btn-evermonte),
.glass-card-materials a:not(.btn-evermonte),
#news a:not(.btn-evermonte),
#about a:not(.btn-evermonte),
#materials a:not(.btn-evermonte) {
  color: #ffffff !important;
  text-decoration: none;
}
.glass-card a:not(.btn-evermonte):hover,
.glass-card-materials a:not(.btn-evermonte):hover,
#news a:not(.btn-evermonte):hover,
#materials a:not(.btn-evermonte):hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Footer — listas sem bullet */
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer ul li {
  padding: 0;
}
footer a {
  text-decoration: none;
  color: inherit;
}
footer a:hover {
  color: #ffffff;
}

/* Overflow-x control global.
   ⚠️ `overflow-x: hidden` no HTML/BODY torna-os container de scroll → no macOS a barra
   de rolagem vira CLÁSSICA (sempre visível) em vez da overlay fina (Maickel 2026-07-30:
   "scrollbar ficou de um modo bem diferente"). `overflow-x: clip` previne o scroll
   horizontal SEM criar container de scroll (o overflow-y do html continua `visible` →
   o viewport rola nativamente → barra overlay de volta). Conferido: scroll ok, sem
   scroll horizontal, html overflow-y = visible. */
html,
body {
  /* !important: havia outra regra (não-important) setando overflow-x:hidden no
     html/body que vencia o clip por ordem/especificidade; com !important o clip
     prevalece e o overflow-y do html volta a `visible` (viewport nativo → barra
     overlay do macOS). Só afeta overflow-x — locks de modal/intro usam overflow-y. */
  overflow-x: clip !important;
  max-width: 100vw;
}

/* ============================================================
   EXPLORAR — família de páginas (Pesquisas, Guias, Dashboards,
   Eventos, Galeria). Header/footer/newsletter vêm do DS;
   aqui só os blocos específicos desta família.
   ============================================================ */

/* --- Shell --- */
.exp-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .exp-shell {
    padding: 0 32px;
  }
}
@media (min-width: 1024px) {
  .exp-shell {
    padding: 0 48px;
  }
}

/* --- Hero editorial --- */
.exp-hero {
  position: relative;
  padding: 120px 0 72px;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.9) 50%,
      #000000 100%
    ),
    url("background-interna.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .exp-hero {
    padding: 152px 0 88px;
  }
}
@media (min-width: 1024px) {
  .exp-hero {
    padding: 172px 0 104px;
  }
}

.exp-hero-inner {
  max-width: 920px;
}
.exp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 24px;
}
.exp-hero-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7da9b5;
}

.exp-hero h1 {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 20px;
}
.exp-hero h1 strong {
  font-weight: 500;
}
.exp-hero p {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 720px;
}

/* --- Chips de categorias (filtros) --- */
.exp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.exp-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Lufga", sans-serif;
}
.exp-chip:hover {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
}
.exp-chip.is-active {
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
  font-weight: 500;
}

/* --- Sections --- */
.exp-section {
  padding: 64px 0;
}
@media (min-width: 768px) {
  .exp-section {
    padding: 80px 0;
  }
}
@media (min-width: 1024px) {
  .exp-section {
    padding: 96px 0;
  }
}
.exp-section + .exp-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.exp-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.exp-section-head h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}
.exp-section-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin-bottom: 10px;
}
.exp-section-link {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 200ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.exp-section-link:hover {
  color: #ffffff;
}
.exp-section-link i {
  font-size: 11px;
}

/* --- Card de DESTAQUE grande (hero do conteúdo) ---
   Variantes por página: use a classe modificadora .exp-feature--{tema}
   Temas disponíveis: pesquisas, guias, dashboards, eventos, galeria
   ---- */
.exp-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: inherit;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms;
  cursor: pointer;
}
.exp-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 169, 181, 0.45);
}

@media (min-width: 1024px) {
  .exp-feature {
    grid-template-columns: 1.2fr 1fr;
  }
}

.exp-feature-visual {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
@media (min-width: 1024px) {
  .exp-feature-visual {
    min-height: 380px;
  }
}

.exp-feature-symbol {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
  position: relative;
  z-index: 1;
}
.exp-feature-caption {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.exp-feature-body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .exp-feature-body {
    padding: 40px 40px;
  }
}

.exp-feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  margin-bottom: 14px;
}
.exp-feature-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.exp-feature h2,
.exp-feature h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 16px;
}
.exp-feature h2 strong,
.exp-feature h3 strong {
  font-weight: 500;
}

.exp-feature-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 24px;
}

.exp-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: gap 200ms, color 200ms;
}
.exp-feature:hover .exp-feature-cta {
  color: #7da9b5;
  gap: 14px;
}

/* Variantes temáticas do visual do card destaque (gradients) */
.exp-feature--pesquisas .exp-feature-visual {
  background: radial-gradient(
      ellipse at 30% 30%,
      rgba(125, 169, 181, 0.4),
      transparent 55%
    ),
    radial-gradient(ellipse at 75% 80%, rgba(37, 72, 88, 0.75), transparent 60%),
    #254858;
}
.exp-feature--guias .exp-feature-visual {
  background: radial-gradient(
      ellipse at 25% 35%,
      rgba(181, 168, 125, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 80% 75%, rgba(88, 67, 37, 0.7), transparent 60%),
    #3d2f1f;
}
.exp-feature--dashboards .exp-feature-visual {
  background: radial-gradient(
      ellipse at 30% 40%,
      rgba(125, 181, 169, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 80% 75%, rgba(37, 88, 72, 0.75), transparent 60%),
    #1f3d2f;
}
.exp-feature--eventos .exp-feature-visual {
  background: radial-gradient(
      ellipse at 35% 35%,
      rgba(181, 125, 169, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 80% 80%, rgba(88, 37, 72, 0.75), transparent 60%),
    #3d1f2f;
}
.exp-feature--galeria .exp-feature-visual {
  background: radial-gradient(
      ellipse at 30% 35%,
      rgba(169, 125, 181, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 75% 80%, rgba(72, 37, 88, 0.75), transparent 60%),
    #2f1f3d;
}

/* --- Grid de cards da listagem --- */
.exp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .exp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .exp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .exp-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 639px) {
  .exp-grid.is-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin: 0 -24px;
    padding: 4px 24px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .exp-grid.is-slider::-webkit-scrollbar {
    display: none;
  }
  .exp-grid.is-slider > * {
    flex: 0 0 calc(100vw - 64px);
    max-width: 340px;
    scroll-snap-align: start;
  }
}

/* --- Card individual (reaproveita .post-card do blog-list,
       mas temos também uma variante compacta para listas) --- */
.exp-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}
.exp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.28);
}

.exp-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(
      ellipse at 30% 40%,
      rgba(125, 169, 181, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 75% 70%, rgba(37, 72, 88, 0.55), transparent 60%),
    #254858;
}
.exp-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.exp-card:hover .exp-card-cover img {
  transform: scale(1.03);
}

.exp-card-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.exp-card-cover-fallback-symbol {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.88;
}
.exp-card-cover-fallback-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
}
.exp-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 400;
}
.exp-card-body {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  gap: 10px;
  flex: 1;
}
.exp-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}
.exp-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.exp-card h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
.exp-card-desc {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exp-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
}

/* --- Lista editorial cronológica (item com data grande à esquerda) --- */
.exp-list {
  display: flex;
  flex-direction: column;
}
.exp-list-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms;
}
@media (min-width: 768px) {
  .exp-list-item {
    grid-template-columns: 140px 1fr auto;
    gap: 32px;
    align-items: start;
  }
}
.exp-list-item:hover {
  background-color: rgba(255, 255, 255, 0.02);
}
.exp-list-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.exp-list-date {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
  padding-top: 4px;
  line-height: 1.4;
}
.exp-list-content h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 8px;
  transition: color 200ms;
}
.exp-list-item:hover h3 {
  color: #7da9b5;
}
.exp-list-excerpt {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.exp-list-arrow {
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: background-color 200ms, color 200ms, border-color 200ms;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .exp-list-arrow {
    display: inline-flex;
  }
}
.exp-list-item:hover .exp-list-arrow {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
}

.exp-list-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* --- Bloco de categorias (deep navigation) --- */
.exp-topics {
  padding: 64px 0;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 1024px) {
  .exp-topics {
    padding: 96px 0;
  }
}
.exp-topics-head {
  max-width: 720px;
  margin-bottom: 36px;
}
.exp-topics-head h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 12px;
}
.exp-topics-head h2 strong {
  font-weight: 500;
}
.exp-topics-head p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  margin: 0;
}
.exp-topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .exp-topics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .exp-topics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.exp-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 18px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.exp-topic-chip:hover {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
}
.exp-topic-chip-count {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  margin-left: auto;
  transition: color 200ms;
}
.exp-topic-chip:hover .exp-topic-chip-count {
  color: rgba(0, 0, 0, 0.45);
}

/* --- 3 CTAs finais lado a lado --- */
.exp-ctas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 768px) {
  .exp-ctas {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.exp-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms;
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.exp-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 169, 181, 0.45);
}
.exp-cta--accent {
  background: #254858;
  border-color: rgba(255, 255, 255, 0.1);
}
.exp-cta--accent::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(
    circle,
    rgba(125, 169, 181, 0.25),
    transparent 60%
  );
  pointer-events: none;
}
.exp-cta > * {
  position: relative;
  z-index: 1;
}
.exp-cta-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  margin: 0 0 12px;
}
.exp-cta h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 14px;
}
.exp-cta p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 24px;
  flex: 1;
}
.exp-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: gap 200ms, color 200ms;
}
.exp-cta:hover .exp-cta-link {
  gap: 14px;
  color: #7da9b5;
}

/* --- Newsletter inline (antes do footer) — usa .newsletter-inline do blog-list
       Se não existir, adicione no CSS global. Aqui só um alias. --- */
.exp-newsletter {
  padding: 48px 28px;
  border-radius: 16px;
  background: #254858;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 96px;
}
.exp-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 20% 20%,
      rgba(125, 169, 181, 0.28),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(181, 212, 222, 0.15),
      transparent 55%
    );
  pointer-events: none;
}
.exp-newsletter-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.exp-newsletter-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
  font-weight: 300;
}
.exp-newsletter h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 16px;
}
.exp-newsletter p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin: 0 0 28px;
}

/* ============================================================
   LOGIN MODAL — classes próprias (não dependem de Tailwind JIT)
   ============================================================ */
.evm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.evm-modal[aria-hidden="false"] {
  display: block;
}
.evm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.evm-modal-scroller {
  position: relative;
  min-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.evm-modal-panel {
  width: 100%;
  max-width: 520px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
  .evm-modal-panel {
    padding: 40px;
  }
}
.evm-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.evm-modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 6px;
  font-weight: 300;
}
.evm-modal-title {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}
.evm-modal-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color 200ms;
  line-height: 1;
}
.evm-modal-close:hover {
  color: #ffffff;
}
.evm-modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.evm-modal-form[hidden] {
  display: none;
}
.evm-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evm-modal-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
}
.evm-modal-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 200ms, background-color 200ms;
}
.evm-modal-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.evm-modal-input:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.evm-modal-input:focus {
  border-color: rgba(125, 169, 181, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.evm-modal-info {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  margin: 0 0 4px;
}
.evm-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.evm-modal-linkbtn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Lufga", sans-serif;
  font-size: 13px;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 0;
  transition: color 200ms;
}
.evm-modal-linkbtn:hover {
  color: #ffffff;
}

/* Trava scroll do body quando modal aberta */
html.evm-modal-open,
body.evm-modal-open {
  overflow: hidden !important;
}

/* ============================================================
   BARRA FIXA MOBILE — telefone + whatsapp
   Aparece só em mobile, fica fixa no bottom.
   ============================================================ */
.evm-contact-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: env(safe-area-inset-bottom, 0) 0 0 0;
  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 767px) {
  .evm-contact-bar {
    display: grid;
  }
  /* Compensa a barra para que o conteúdo do footer não fique escondido embaixo */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}
.evm-contact-bar-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 14px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms;
}
.evm-contact-bar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: #ffffff;
}
.evm-contact-bar-btn + .evm-contact-bar-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.evm-contact-bar-btn i,
.evm-contact-bar-btn svg {
  font-size: 16px;
  line-height: 1;
}
.evm-contact-bar-btn--whatsapp i {
  color: #7da9b5;
}
.evm-contact-bar-btn--phone i {
  color: #ffffff;
}

/* ============================================================
   5. PAGE-SPECIFIC INLINE STYLES (extraídos dos <style> dos HTMLs)
   ============================================================ */

/* --- from GUIA-COMPONENTES.html (block 1, escopado para body.page-guia-componentes) --- */
body.page-guia-componentes {
  background: #000000;
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 64px 24px;
}
body.page-guia-componentes .wrap {
  max-width: 980px;
  margin: 0 auto;
}
body.page-guia-componentes h1 {
  font-size: 40px;
  font-weight: 200;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
body.page-guia-componentes h1 strong {
  font-weight: 500;
}
body.page-guia-componentes .lead {
  font-size: 18px;
  font-weight: 300;
  color: #d4d4d4;
  margin: 0 0 48px;
  max-width: 640px;
}
body.page-guia-componentes h2 {
  font-size: 26px;
  font-weight: 300;
  margin: 64px 0 8px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.page-guia-componentes h2 .num {
  font-family: ui-monospace, monospace;
  color: #7da9b5;
  font-size: 14px;
  margin-right: 12px;
}
body.page-guia-componentes h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 32px 0 12px;
  color: #d4d4d4;
}
body.page-guia-componentes p {
  color: #d4d4d4;
  margin: 0 0 16px;
  font-weight: 300;
}
body.page-guia-componentes p.intro {
  font-size: 15px;
}
body.page-guia-componentes ul {
  color: #d4d4d4;
  font-weight: 300;
  padding-left: 20px;
  margin: 0 0 16px;
}
body.page-guia-componentes ul li {
  margin-bottom: 6px;
}
body.page-guia-componentes code.inline {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  background: rgba(125, 169, 181, 0.12);
  color: #7da9b5;
  padding: 2px 6px;
  border-radius: 4px;
}
body.page-guia-componentes pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  overflow-x: auto;
  color: #d4d4d4;
  line-height: 1.6;
  margin: 16px 0 24px;
}
body.page-guia-componentes pre .tag {
  color: #7da9b5;
}
body.page-guia-componentes pre .attr {
  color: #d4a3a3;
}
body.page-guia-componentes pre .str {
  color: #b5d4a3;
}
body.page-guia-componentes pre .comment {
  color: #737373;
  font-style: italic;
}

body.page-guia-componentes .callout {
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(125, 169, 181, 0.35);
  background: rgba(125, 169, 181, 0.08);
  backdrop-filter: blur(12px);
  margin: 16px 0 24px;
  font-size: 14px;
  color: #d4d4d4;
}
body.page-guia-componentes .callout strong {
  color: #ffffff;
  font-weight: 500;
}

body.page-guia-componentes .toc {
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 48px;
}
body.page-guia-componentes .toc-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a3a3a3;
  margin-bottom: 12px;
}
body.page-guia-componentes .toc ol {
  margin: 0;
  padding-left: 20px;
  color: #d4d4d4;
  font-weight: 300;
  font-size: 14px;
}
body.page-guia-componentes .toc ol li {
  margin-bottom: 6px;
}
body.page-guia-componentes .toc a {
  color: inherit;
  text-decoration: none;
}
body.page-guia-componentes .toc a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Preview live dos componentes */
body.page-guia-componentes .live {
  padding: 24px;
  border-radius: 16px;
  background-image: radial-gradient(
      ellipse at 30% 40%,
      rgba(125, 169, 181, 0.18),
      transparent 55%
    ),
    radial-gradient(ellipse at 80% 70%, rgba(37, 72, 88, 0.35), transparent 60%),
    #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 16px 0 24px;
  overflow: hidden;
}
body.page-guia-componentes .live + .live-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #737373;
  margin: -16px 0 16px;
}

/* --- from blog-list.html (block 1, escopado para body.page-blog-list) --- */
body.page-blog-list {
  --font-lufga: "Lufga", sans-serif;
}
body.page-blog-list {
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-lufga);
}

/* ============================================================ LAYOUT ============================================================ */
body.page-blog-list .blog-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  body.page-blog-list .blog-shell {
    padding: 0 32px;
  }
}
@media (min-width: 1024px) {
  body.page-blog-list .blog-shell {
    padding: 0 48px;
  }
}

/* ============================================================ HERO COMPACTO ============================================================ */
body.page-blog-list .blog-hero {
  position: relative;
  padding: 120px 0 56px;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.7) 35%,
      rgba(0, 0, 0, 1) 100%
    ),
    url("background-interna.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 0;
}
@media (min-width: 768px) {
  body.page-blog-list .blog-hero {
    padding: 152px 0 72px;
  }
}
@media (min-width: 1024px) {
  body.page-blog-list .blog-hero {
    padding: 172px 0 88px;
  }
}

body.page-blog-list .blog-hero-inner {
  max-width: 820px;
}
body.page-blog-list .blog-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 24px;
}
body.page-blog-list .blog-hero-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7da9b5;
}

body.page-blog-list .blog-hero h1 {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 20px;
}
body.page-blog-list .blog-hero h1 strong {
  font-weight: 500;
}
body.page-blog-list .blog-hero p {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 32px;
  max-width: 640px;
}

body.page-blog-list .blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-blog-list .blog-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms;
  text-decoration: none;
  white-space: nowrap;
}
body.page-blog-list .blog-chip:hover {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
}
body.page-blog-list .blog-chip.is-active {
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
  font-weight: 500;
}

/* ── Fundo por categoria (vídeo/imagem via admin) + faixa de chips (Maickel 2026-07-22) ── */
body.page-blog-list .blog-hero { overflow: hidden; }
body.page-blog-list .blog-hero.has-media-bg { background-image: none; }
body.page-blog-list .blog-hero .blog-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0; pointer-events: none;
}
body.page-blog-list .blog-hero .blog-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.92) 100%);
}
body.page-blog-list .blog-hero .blog-shell { position: relative; z-index: 2; }

/* Faixa de chips abaixo do hero — slider full-width igual à página Insights
   (setas + fades dos dois lados + drag). Maickel 2026-07-23. */
body.page-blog-list .blog-chips-band {
  position: relative; width: 100%; max-width: 100%; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: #0b0b0b;
}
body.page-blog-list .blog-chips-fade {
  position: absolute; top: 0; bottom: 0; width: 88px; z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
body.page-blog-list .blog-chips-fade--left {
  left: 0;
  background: linear-gradient(to right, #0b0b0b 0%, #0b0b0b 28%, rgba(11,11,11,.75) 55%, transparent 100%);
}
body.page-blog-list .blog-chips-fade--right {
  right: 0;
  background: linear-gradient(to left, #0b0b0b 0%, #0b0b0b 28%, rgba(11,11,11,.75) 55%, transparent 100%);
}
body.page-blog-list .blog-chips-band.has-overflow-left .blog-chips-fade--left,
body.page-blog-list .blog-chips-band.has-overflow-right .blog-chips-fade--right { opacity: 1; }
body.page-blog-list .blog-chips-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(18,18,18,.96);
  color: #fff; cursor: pointer; z-index: 5; display: none;
  align-items: center; justify-content: center; padding: 0; line-height: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
body.page-blog-list .blog-chips-nav svg { width: 14px; height: 14px; display: block; flex-shrink: 0; pointer-events: none; }
body.page-blog-list .blog-chips-nav:hover { background: #fff; color: #111; border-color: #fff; transform: translateY(-50%) scale(1.05); }
body.page-blog-list .blog-chips-nav--prev { left: 10px; }
body.page-blog-list .blog-chips-nav--next { right: 10px; }
body.page-blog-list .blog-chips-band.has-overflow-left .blog-chips-nav--prev,
body.page-blog-list .blog-chips-band.has-overflow-right .blog-chips-nav--next { display: flex; }
body.page-blog-list .blog-chips-band .blog-chips {
  display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%;
  min-width: 0; margin: 0; padding: 14px 56px;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; cursor: grab;
}
body.page-blog-list .blog-chips-band .blog-chips.is-dragging { cursor: grabbing; scroll-behavior: auto; }
body.page-blog-list .blog-chips-band .blog-chips::-webkit-scrollbar { display: none; }
@media (max-width: 991.98px) {
  body.page-blog-list .blog-chips-band .blog-chips { padding-left: 52px; padding-right: 52px; }
  body.page-blog-list .blog-chips-fade { width: 72px; }
}

/* ============================================================ SEÇÕES ============================================================ */
body.page-blog-list .blog-section {
  padding: 64px 0;
}
@media (min-width: 768px) {
  body.page-blog-list .blog-section {
    padding: 80px 0;
  }
}
@media (min-width: 1024px) {
  body.page-blog-list .blog-section {
    padding: 96px 0;
  }
}

body.page-blog-list .blog-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
body.page-blog-list .blog-section-head h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0;
}
body.page-blog-list .blog-section-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin-bottom: 10px;
}
body.page-blog-list .blog-section-link {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 200ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.page-blog-list .blog-section-link:hover {
  color: #ffffff;
}
body.page-blog-list .blog-section-link i {
  font-size: 11px;
}

/* ============================================================ POST CARD ============================================================ */
body.page-blog-list .post-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}
body.page-blog-list .post-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.28);
}

body.page-blog-list .post-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(
      ellipse at 30% 40%,
      rgba(125, 169, 181, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 75% 70%, rgba(37, 72, 88, 0.55), transparent 60%),
    #254858;
}
body.page-blog-list .post-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.page-blog-list .post-card:hover .post-card-cover img {
  transform: scale(1.03);
}

body.page-blog-list .post-card-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
body.page-blog-list .post-card-cover-fallback-symbol {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.88;
}
body.page-blog-list .post-card-cover-fallback-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
}

body.page-blog-list .post-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 400;
}

body.page-blog-list .post-card-body {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  gap: 10px;
  flex: 1;
}
body.page-blog-list .post-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}
body.page-blog-list .post-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
body.page-blog-list .post-card-title {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
body.page-blog-list .post-card-excerpt {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-blog-list .post-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
}
body.page-blog-list .post-card-author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* DESTAQUE GRANDE */
body.page-blog-list .post-card-featured {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  body.page-blog-list .post-card-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
  }
  body.page-blog-list .post-card-featured .post-card-cover {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }
  body.page-blog-list .post-card-featured .post-card-body {
    padding: 32px 36px;
    justify-content: center;
  }
  body.page-blog-list .post-card-featured .post-card-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  body.page-blog-list .post-card-featured .post-card-excerpt {
    font-size: 14px;
    -webkit-line-clamp: 4;
  }
}

/* ============================================================ GRIDS ============================================================ */
body.page-blog-list .post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  body.page-blog-list .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  body.page-blog-list .post-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  body.page-blog-list .post-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Em mobile grids viram slider */
@media (max-width: 639px) {
  body.page-blog-list .post-grid.is-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin: 0 -24px;
    padding: 4px 24px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-blog-list .post-grid.is-slider::-webkit-scrollbar {
    display: none;
  }
  body.page-blog-list .post-grid.is-slider > .post-card {
    flex: 0 0 calc(100vw - 64px);
    max-width: 340px;
    scroll-snap-align: start;
  }
}

/* ============================================================ RESEARCH CARD ============================================================ */
body.page-blog-list .research-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  background: #254858;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms;
  cursor: pointer;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}
body.page-blog-list .research-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(125, 169, 181, 0.25),
    transparent 60%
  );
  pointer-events: none;
}
body.page-blog-list .research-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.28);
}
body.page-blog-list .research-card-kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
  font-weight: 300;
}
body.page-blog-list .research-card-stat {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: 3rem;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
body.page-blog-list .research-card-stat strong {
  color: #b5d4de;
  font-weight: 500;
}
body.page-blog-list .research-card-title {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
body.page-blog-list .research-card-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 auto 0;
  flex: 1;
  position: relative;
  z-index: 1;
}
body.page-blog-list .research-card-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 1;
}
body.page-blog-list .research-card-footer .arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms, color 200ms;
}
body.page-blog-list .research-card:hover .research-card-footer .arrow {
  background: #ffffff;
  color: #000;
}

/* ============================================================ AUTOR CARD ============================================================ */
body.page-blog-list .author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 200ms, background-color 200ms;
  text-decoration: none;
  color: inherit;
}
body.page-blog-list .author-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
body.page-blog-list .author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body.page-blog-list .author-name {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 4px;
}
body.page-blog-list .author-role {
  font-size: 12px;
  font-weight: 300;
  color: rgba(125, 169, 181, 0.9);
  margin: 0 0 12px;
}
body.page-blog-list .author-count {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}

/* ============================================================ NEWSLETTER INLINE ============================================================ */
body.page-blog-list .newsletter-inline {
  padding: 48px 28px;
  border-radius: 16px;
  background: #254858;
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.page-blog-list .newsletter-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 20% 20%,
      rgba(125, 169, 181, 0.28),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(181, 212, 222, 0.15),
      transparent 55%
    );
  pointer-events: none;
}
body.page-blog-list .newsletter-inline-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
body.page-blog-list .newsletter-inline-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
  font-weight: 300;
}
body.page-blog-list .newsletter-inline h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 16px;
}
body.page-blog-list .newsletter-inline p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin: 0 0 28px;
}

body.page-blog-list .blog-section + .blog-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- from blog-post.html (block 1, escopado para body.page-blog-post) --- */
body.page-blog-post {
  --font-lufga: "Lufga", sans-serif;
}
body.page-blog-post {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-lufga);
}

/* ============================================================
           POST LAYOUT — coluna central + TOC lateral
           ============================================================ */
body.page-blog-post .post-grid {
  display: grid;
  /* minmax(0, 1fr) — NÃO `1fr`: com `1fr` (=minmax(auto,1fr)) o min-content do corpo
     (palavra/elemento largo) fazia a coluna crescer além da área com padding e o texto
     era CORTADO na direita no mobile (Andreia 2026-07-30). minmax(0,...) deixa a coluna
     encolher e o conteúdo quebrar linha. */
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  body.page-blog-post .post-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 72px;
    padding: 0 48px;
  }
}

/* ============================================================
           HERO do post
           ============================================================ */
body.page-blog-post .post-hero {
  --post-hero-image: url("https://cdn.prod.website-files.com/6500a69c7503db3b420eb5fe/652185283b21383af2c9ddf7_Digital%20Transformation-p-1600.jpg");
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0 48px;
  background-color: #000000;
}
body.page-blog-post .post-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: var(--post-hero-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  animation: evmPostHeroKenBurns 30s ease-in-out infinite alternate;
  filter: brightness(1.1) saturate(1.08);
  z-index: 0;
  pointer-events: none;
}
body.page-blog-post .post-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Radial escurece a faixa do título/lede; linear mantém bordas um pouco mais claras */
  background: radial-gradient(
      ellipse 92% 78% at 50% 22%,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0.22) 48%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.48) 32%,
      rgba(0, 0, 0, 0.62) 58%,
      rgba(0, 0, 0, 0.82) 100%
    );
  z-index: 1;
  pointer-events: none;
}
@keyframes evmPostHeroKenBurns {
  0% {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.16) translate3d(-1.6%, 1%, 0);
  }
}
@keyframes evmPostHeroContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes evmPostKickerPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(125, 169, 181, 0.45);
  }
  55% {
    box-shadow: 0 0 0 7px rgba(125, 169, 181, 0);
  }
}
@keyframes evmPostTocIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 768px) {
  body.page-blog-post .post-hero {
    padding: 160px 0 64px;
  }
}
@media (min-width: 1024px) {
  body.page-blog-post .post-hero {
    padding: 180px 0 80px;
  }
}
body.page-blog-post .post-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
body.page-blog-post .post-hero-inner > * {
  opacity: 0;
  animation: evmPostHeroContentIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.page-blog-post .post-hero-inner > *:nth-child(1) {
  animation-delay: 0.08s;
}
body.page-blog-post .post-hero-inner > *:nth-child(2) {
  animation-delay: 0.16s;
}
body.page-blog-post .post-hero-inner > *:nth-child(3) {
  animation-delay: 0.24s;
}
body.page-blog-post .post-hero-inner > *:nth-child(4) {
  animation-delay: 0.32s;
}
body.page-blog-post .post-hero-inner > *:nth-child(5) {
  animation-delay: 0.4s;
}
body.page-blog-post .post-hero-inner > *:nth-child(6) {
  animation-delay: 0.48s;
}

/* Blog-detail: hero — imagem no HTML (.post-hero-bg); fundo cobre a viewport inteira */
body.page-blog-post.page-blog-detail {
  --evm-blog-detail-hero-pull: 104px;
}
/* Intro Blog-detail: scroll da página travado até o título “sair”; JS coloca .evm-hero-intro-locked no <html> */
html.evm-hero-intro-locked {
  overflow: hidden;
  height: 100%;
  padding-right: var(--evm-scrollbar-comp, 0px);
}
html.evm-hero-intro-locked body.page-blog-detail {
  overflow: hidden;
  overscroll-behavior: none;
}
html.evm-hero-intro-locked body.page-blog-detail #header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  padding-right: var(--evm-scrollbar-comp, 0px);
}
/* Hero = 1× viewport; o efeito do título é por wheel (não por altura extra da section) */
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail.post-hero--scroll-exit {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: none;
  overflow: visible;
  /* Compensa o pull negativo do hero para manter 100% da viewport visível */
  min-height: calc(100vh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100svh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  height: auto;
  margin-top: calc(-1 * var(--evm-blog-detail-hero-pull, 104px));
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail.post-hero--scroll-exit.post-hero--scroll-exit--reduced {
  box-sizing: border-box;
  height: auto;
  min-height: calc(100vh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100svh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-scroll-pin {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(100vh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100svh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  height: calc(100vh + var(--evm-blog-detail-hero-pull, 104px));
  height: calc(100svh + var(--evm-blog-detail-hero-pull, 104px));
  height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  max-height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  margin: 0;
  padding-top: calc(var(--evm-blog-detail-hero-pull, 104px) + 14px);
  padding-bottom: 16px;
  /* clip (não hidden) no eixo x: `overflow-x:hidden` + `overflow-y:visible`
     faz o browser computar overflow-y como `auto` → o pin vira um scroll
     container aninhado de 100vh e, depois do intro-lock destravar, a roda
     do mouse rola esses ~249px internos ANTES da página ("travado no hero").
     Com `clip` o par computa `clip visible` = sem scroll container, mesmo
     clip horizontal, efeito do título (transform) intacto. */
  overflow-x: clip;
  overflow-y: visible;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail.post-hero--scroll-exit--reduced
  .post-hero-scroll-pin {
  position: relative;
  height: auto;
  max-height: none;
  min-height: calc(100vh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100svh + var(--evm-blog-detail-hero-pull, 104px));
  min-height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-exit-target {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: clamp(14px, 2.4vh, 28px);
  overflow: visible;
}
/* Evita conflito com o fade-in global do .post-hero-inner > * (opacity/transform no stage) */
body.page-blog-post.page-blog-detail
  .post-hero
  .post-hero-inner
  > .post-hero-stage {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-stack[data-hero-exit-stack] {
  box-sizing: border-box;
  max-width: 100%;
  will-change: transform, opacity;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-exit-target
  .post-hero-scroll {
  margin-top: clamp(28px, 5.5vh, 56px);
  flex-shrink: 0;
}
/* Pseudo desligado: a foto vem do <img> em Blog-detail.html */
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail::before {
  content: none !important;
}
/* Scrim de legibilidade sobre a foto (pedido Helena 2026-07-29): gradiente que
   garante contraste do título/meta em qualquer imagem, inclusive fundos claros.
   Antes o ::after era transparent e o título dependia só do text-shadow. */
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail::after {
  background:
    radial-gradient(
        ellipse 92% 70% at 50% 20%,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.15) 46%,
        transparent 66%
      ),
    linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.22) 24%,
        rgba(0, 0, 0, 0.42) 50%,
        rgba(0, 0, 0, 0.66) 68%,
        rgba(0, 0, 0, 0.82) 84%,
        rgba(0, 0, 0, 0.92) 100%
      ) !important;
}
/* Uma viewport só: a trilha de scroll é maior que a tela, mas a foto não estica com ela */
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100vh + var(--evm-blog-detail-hero-pull, 104px));
  height: calc(100svh + var(--evm-blog-detail-hero-pull, 104px));
  height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  max-height: calc(100dvh + var(--evm-blog-detail-hero-pull, 104px));
  bottom: auto;
  pointer-events: none;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  /* Leve escurecimento como piso de contraste em fotos muito claras (2026-07-29) */
  filter: brightness(0.88) saturate(1.03);
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Eleva o bloco título+meta+linha+scroll (referência: cluster acima do rodapé da viewport) */
  padding-bottom: clamp(36px, 6.5vh, 88px);
  box-sizing: border-box;
}
/* Evita duplicar logo/menu: topo do hero fica oculto porque o header global já cobre navegação */
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-top {
  display: none;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-spacer {
  flex: 1 1 auto;
  min-height: 0;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 1.8vh, 18px);
  padding-bottom: 0;
  margin-top: 0;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-title {
  max-width: 980px;
  margin: 0;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-title
  .post-title-light {
  display: block;
  margin-top: clamp(6px, 1.1vh, 12px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-title
  strong {
  font-weight: 500;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-submeta {
  margin: 0;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-submeta
  strong {
  font-weight: 500;
  color: #ffffff;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-rule {
  width: clamp(48px, 8vw, 64px);
  height: 1px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-scroll {
  padding-top: 0;
  display: flex;
  justify-content: center;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-scroll-btn {
  width: 44px;
  height: 44px;
  /* Círculo agora vem do próprio SVG (traço 1.3px) — pedido cliente 2026-07-28,
     seta na mesma proporção do círculo. Sem border/fundo p/ não duplicar o anel. */
  border: 0;
  background: transparent;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 160ms ease, opacity 160ms ease;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-scroll-btn svg {
  width: 44px;
  height: 44px;
  display: block;
}
body.page-blog-post.page-blog-detail
  .post-hero.post-hero--featured.post-hero--detail
  .post-hero-scroll-btn:hover {
  transform: translateY(2px);
  opacity: 0.85;
}
body.page-blog-post.page-blog-detail[data-reading-theme="light"]
  .post-hero.post-hero--featured.post-hero--detail::after {
  /* Mesmo scrim também no tema de leitura claro (senão o título fica sem contraste). */
  background:
    radial-gradient(
        ellipse 92% 70% at 50% 20%,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.15) 46%,
        transparent 66%
      ),
    linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.22) 24%,
        rgba(0, 0, 0, 0.42) 50%,
        rgba(0, 0, 0, 0.66) 68%,
        rgba(0, 0, 0, 0.82) 84%,
        rgba(0, 0, 0, 0.92) 100%
      ) !important;
}
@media (min-width: 768px) {
  body.page-blog-post.page-blog-detail {
    --evm-blog-detail-hero-pull: 120px;
  }
}
@media (min-width: 1024px) {
  body.page-blog-post.page-blog-detail {
    --evm-blog-detail-hero-pull: 132px;
  }
}
/* post-agenda-de-pessoas-2026-v3.css coloca padding-top no .post-grid; no Blog-detail cola no hero */
body.page-blog-post.page-blog-detail .post-grid {
  padding-top: 0 !important;
}

body.page-blog-post .post-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 24px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
body.page-blog-post .post-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7da9b5;
  animation: evmPostKickerPulse 2.5s ease-in-out infinite;
}
body.page-blog-post .post-title {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: #ffffff;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.55),
    0 4px 24px rgba(0, 0, 0, 0.5);
}
body.page-blog-post .post-title strong {
  font-weight: 500;
}
body.page-blog-post .post-lede {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  max-width: 720px;
  margin: 0 0 36px;
  text-shadow: 0 0 28px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Meta de autor + data + tempo de leitura */
body.page-blog-post .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
body.page-blog-post .post-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body.page-blog-post .post-meta-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
body.page-blog-post .post-meta-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-blog-post .post-meta-author-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65), 0 0 1px rgba(0, 0, 0, 0.8);
}
body.page-blog-post .post-meta-author-role {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
body.page-blog-post .post-meta-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.14);
}
body.page-blog-post .post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
body.page-blog-post .post-meta-item i {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

/* Compartilhar */
body.page-blog-post .post-share {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.page-blog-post .post-share-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-right: 4px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
body.page-blog-post .post-share a {
  width: 34px;
  height: 34px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  transition: background-color 200ms, color 200ms, border-color 200ms,
    transform 0.3s var(--evm-ease);
  text-decoration: none;
}
body.page-blog-post .post-share a:hover {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-3px);
}

/* ============================================================
           PROGRESS BAR — fixa no topo, preenche conforme scroll
           ============================================================ */
body.page-blog-post .post-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
body.page-blog-post .post-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7da9b5 0%, #b5d4de 100%);
  width: 0;
  transition: width 80ms linear;
}

/* ============================================================
           TOC LATERAL — sticky em desktop, inline em mobile
           ============================================================ */
body.page-blog-post .post-toc {
  position: relative;
}
body.page-blog-post .post-toc .post-toc-inner {
  animation: evmPostTocIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}
@media (min-width: 1024px) {
  body.page-blog-post .post-toc-inner {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
  }
  body.page-blog-post .post-toc-inner::-webkit-scrollbar {
    width: 4px;
  }
  body.page-blog-post .post-toc-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
  }
}
body.page-blog-post .post-toc-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
  margin: 0 0 16px;
}
body.page-blog-post .post-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
body.page-blog-post .post-toc li {
  counter-increment: toc;
}
body.page-blog-post .post-toc a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: color 200ms, border-color 200ms, transform 0.35s var(--evm-ease);
}
body.page-blog-post .post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
  font-weight: 400;
  padding-top: 1px;
  flex-shrink: 0;
}
body.page-blog-post .post-toc a:hover {
  color: #ffffff;
  transform: translateX(3px);
}
body.page-blog-post .post-toc a.is-active {
  color: #ffffff;
  border-left-color: #7da9b5;
}
body.page-blog-post .post-toc a.is-active::before {
  color: #7da9b5;
}

/* TOC mobile: accordion */
@media (max-width: 1023px) {
  body.page-blog-post .post-toc {
    margin: 32px 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  body.page-blog-post .post-toc-inner {
    padding: 16px 20px;
  }
  body.page-blog-post .post-toc-title {
    margin: 0 0 12px;
  }
}

/* ============================================================
           CORPO DO ARTIGO — tipografia editorial
           ============================================================ */
body.page-blog-post .post-body {
  max-width: 720px;
}
/* Reveal ao scroll — classes aplicadas por evermonte-ds.js */
body.page-blog-post .post-body > .post-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--post-reveal-delay, 0ms);
}
body.page-blog-post .post-body > .post-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  body.page-blog-post .post-hero::before {
    animation: none !important;
    transform: none !important;
    inset: 0;
  }
  body.page-blog-post .post-hero-inner > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-blog-post .post-kicker .dot {
    animation: none !important;
    box-shadow: none !important;
  }
  body.page-blog-post .post-body > .post-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.page-blog-post .post-related .evm-slider-card {
    transition: none !important;
  }
  body.page-blog-post .post-related .evm-slider-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  body.page-blog-post .post-toc .post-toc-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
body.page-blog-post .post-body h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 64px 0 20px;
  scroll-margin-top: 96px; /* para âncoras não ficarem sob o header fixo */
}
body.page-blog-post .post-body h2 .chapter-num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7da9b5;
  font-weight: 500;
  margin-bottom: 8px;
}
body.page-blog-post .post-body h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #ffffff;
  margin: 40px 0 16px;
}
body.page-blog-post .post-body p {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 20px;
}
body.page-blog-post .post-body p strong {
  color: #ffffff;
  font-weight: 500;
}
body.page-blog-post .post-body p em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
}
body.page-blog-post .post-body a:not(.btn-evermonte) {
  color: #7da9b5;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 150ms;
}
body.page-blog-post .post-body a:not(.btn-evermonte):hover {
  color: #b5d4de;
}
body.page-blog-post .post-body ul,
body.page-blog-post .post-body ol {
  padding-left: 1.5em;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
}
body.page-blog-post .post-body ul li,
body.page-blog-post .post-body ol li {
  margin-bottom: 8px;
}
body.page-blog-post .post-body ul li::marker {
  color: rgba(125, 169, 181, 0.7);
}

/* Lede (primeiro parágrafo maior) */
body.page-blog-post .post-body .lede {
  font-size: 1.25rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 32px;
  font-weight: 300;
}

/* Blockquote (pull quote) */
body.page-blog-post .post-body blockquote {
  margin: 40px 0;
  padding: 24px 28px;
  border-left: 3px solid #7da9b5;
  background: rgba(125, 169, 181, 0.06);
  border-radius: 0 16px 16px 0;
}
body.page-blog-post .post-body blockquote p {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #ffffff;
  font-style: italic;
  margin: 0 0 12px;
}
body.page-blog-post .post-body blockquote footer {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

/* Highlight box (destaque numérico/estatística) */
body.page-blog-post .post-highlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 40px 0;
  padding: 28px;
  border-radius: 16px;
  background: rgba(125, 169, 181, 0.1);
  border: 1px solid rgba(125, 169, 181, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 640px) {
  body.page-blog-post .post-highlight {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}
body.page-blog-post .post-highlight-stat {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}
body.page-blog-post .post-highlight-stat strong {
  font-weight: 500;
  color: #7da9b5;
}
body.page-blog-post .post-highlight-text {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Figura/imagem com legenda */
body.page-blog-post .post-figure {
  margin: 40px 0;
}
body.page-blog-post .post-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.page-blog-post .post-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  text-align: center;
}

/* Tabela de dados */
body.page-blog-post .post-body table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 14px;
  font-weight: 300;
}
body.page-blog-post .post-body th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 500;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.page-blog-post .post-body td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  vertical-align: top;
}
body.page-blog-post .post-body tr:last-child td {
  border-bottom: none;
}
body.page-blog-post .post-body td strong {
  color: #ffffff;
  font-weight: 500;
}

/* ============================================================
           BIO DO AUTOR (após o artigo)
           ============================================================ */
body.page-blog-post .post-author-card {
  margin: 80px 0 0;
  padding: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
}
/* Quando a bio fica fora da coluna estreita do artigo, alinha com o container de "relacionados" */
body.page-blog-post .post-related-inner > .post-author-card {
  margin-top: 48px;
}
@media (max-width: 639px) {
  body.page-blog-post .post-author-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
}
body.page-blog-post .post-author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 639px) {
  body.page-blog-post .post-author-avatar {
    margin: 0 auto;
  }
}
body.page-blog-post .post-author-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin: 0 0 6px;
}
body.page-blog-post .post-author-name {
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 4px;
}
body.page-blog-post .post-author-role {
  font-size: 14px;
  font-weight: 300;
  color: #7da9b5;
  margin: 0 0 12px;
}
body.page-blog-post .post-author-bio {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 16px;
}
body.page-blog-post .post-author-links {
  display: inline-flex;
  gap: 8px;
}

/* ============================================================
           RELACIONADOS — reaproveita slider do DS
           ============================================================ */
body.page-blog-post .post-related {
  padding: 64px 0;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 80px;
}
body.page-blog-post .post-related-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
body.page-blog-post .post-related h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #ffffff;
  margin: 0 0 8px;
}
body.page-blog-post .post-related-kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin: 0 0 32px;
}
body.page-blog-post .post-related .evm-slider-card {
  transition: transform 0.4s var(--evm-ease), box-shadow 0.4s var(--evm-ease);
}
body.page-blog-post .post-related .evm-slider-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* ============================================================
           CTA FINAL — newsletter inline
           ============================================================ */
body.page-blog-post .post-cta {
  margin: 64px 0 0;
  padding: 40px 32px;
  border-radius: 16px;
  background: #254858;
  text-align: center;
}
body.page-blog-post .post-related-inner > .post-cta {
  margin-top: 24px;
}
body.page-blog-post .post-cta-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  margin: 0 0 12px;
}
body.page-blog-post .post-cta h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.2;
}
body.page-blog-post .post-cta p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 24px;
  font-weight: 300;
}

/* Reforços gerais */
body.page-blog-post #main-content {
  padding-bottom: 0;
}

/* ============================================================
           TEMA DE LEITURA (dark / light) — posts
           Controlado por JS: body.page-blog-post[data-reading-theme="dark|light"]
           ============================================================ */
body.page-blog-post[data-reading-theme="light"] {
  background: #ffffff;
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] #page-content {
  background: #ffffff;
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-body,
body.page-blog-post[data-reading-theme="light"] .post-body p,
body.page-blog-post[data-reading-theme="light"] .post-body li {
  color: rgba(17, 17, 17, 0.88);
}
body.page-blog-post[data-reading-theme="light"] .post-body h2,
body.page-blog-post[data-reading-theme="light"] .post-body h3 {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-body .lede {
  color: rgba(17, 17, 17, 0.92);
}
body.page-blog-post[data-reading-theme="light"] .post-body blockquote {
  border-left-color: rgba(17, 17, 17, 0.18);
  background: rgba(0, 0, 0, 0.03);
}
body.page-blog-post[data-reading-theme="light"] .post-body blockquote p {
  color: rgba(17, 17, 17, 0.88);
}
body.page-blog-post[data-reading-theme="light"] .post-body blockquote footer {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] .post-highlight {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
body.page-blog-post[data-reading-theme="light"] .post-highlight-stat {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-highlight-text {
  color: rgba(17, 17, 17, 0.85);
}
body.page-blog-post[data-reading-theme="light"] .post-toc-inner {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}
body.page-blog-post[data-reading-theme="light"] .post-toc-title {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] .post-toc a {
  color: rgba(17, 17, 17, 0.75);
}
body.page-blog-post[data-reading-theme="light"] .post-toc a.is-active {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.04);
}
body.page-blog-post[data-reading-theme="light"] .post-author-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
body.page-blog-post[data-reading-theme="light"] .post-author-eyebrow {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] .post-author-name {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-author-bio {
  color: rgba(17, 17, 17, 0.78);
}
body.page-blog-post[data-reading-theme="light"] .post-related {
  background: #f6f6f6;
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.page-blog-post[data-reading-theme="light"] .post-related h2 {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-related-kicker {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] footer {
  background: #ffffff !important;
  border-top-color: rgba(0, 0, 0, 0.1) !important;
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] footer .text-neutral-300,
body.page-blog-post[data-reading-theme="light"] footer .text-neutral-400,
body.page-blog-post[data-reading-theme="light"] footer .text-neutral-500 {
  color: rgba(17, 17, 17, 0.65) !important;
}
body.page-blog-post[data-reading-theme="light"] footer a {
  color: rgba(17, 17, 17, 0.85);
}

/* Ajustes adicionais do modo claro (hero, header, tipografia residual) */
body.page-blog-post[data-reading-theme="light"]
  header#header.bg-gradient-to-b.from-black\/55.via-black\/20.to-transparent {
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.92),
    rgb(255 255 255 / 0.55),
    transparent
  ) !important;
}
body.page-blog-post[data-reading-theme="light"] header .text-white,
body.page-blog-post[data-reading-theme="light"] header .hover\:opacity-80 {
  color: #111111 !important;
}
body.page-blog-post[data-reading-theme="light"] header .evm-nav-link {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.55);
}
body.page-blog-post[data-reading-theme="light"] header .evm-nav-link:hover,
body.page-blog-post[data-reading-theme="light"]
  header
  .evm-nav-item.is-open
  .evm-nav-link {
  background: #111111;
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.35);
}
body.page-blog-post[data-reading-theme="light"] header .btn-evermonte-outline {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.65);
}
body.page-blog-post[data-reading-theme="light"]
  header
  .btn-evermonte-outline:hover {
  background: #111111;
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.45);
}
body.page-blog-post[data-reading-theme="light"]
  header
  [data-reading-theme-toggle].btn-outline-light {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.65);
}
body.page-blog-post[data-reading-theme="light"]
  header
  [data-reading-theme-toggle].btn-outline-light:hover {
  background: #111111;
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.45);
}
body.page-blog-post[data-reading-theme="light"] header .evm-tagline {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] header .evm-hamburger {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.65);
}
body.page-blog-post[data-reading-theme="light"] header .evm-hamburger:hover {
  background: #111111;
  border-color: rgba(0, 0, 0, 0.45);
}
body.page-blog-post[data-reading-theme="light"] header .evm-hamburger-line {
  background: #111111;
}
body.page-blog-post[data-reading-theme="light"]
  header
  .evm-hamburger:hover
  .evm-hamburger-line {
  background: #ffffff;
}

body.page-blog-post[data-reading-theme="light"] .post-hero {
  background-color: #ffffff;
}
body.page-blog-post[data-reading-theme="light"] .post-hero::before {
  opacity: 0;
  visibility: hidden;
  animation: none;
}
body.page-blog-post[data-reading-theme="light"] .post-hero::after {
  background: #ffffff;
}
body.page-blog-post[data-reading-theme="light"] .post-kicker {
  color: rgba(17, 17, 17, 0.62);
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.03);
  text-shadow: none;
  font-weight: 300;
}
body.page-blog-post[data-reading-theme="light"] .post-title {
  color: #111111;
  text-shadow: none;
  font-weight: 200;
}
body.page-blog-post[data-reading-theme="light"] .post-title strong {
  font-weight: 500;
}
body.page-blog-post[data-reading-theme="light"] .post-lede {
  color: rgba(17, 17, 17, 0.78);
  text-shadow: none;
  font-weight: 300;
}
body.page-blog-post[data-reading-theme="light"] .post-meta {
  border-top-color: rgba(0, 0, 0, 0.1);
}
body.page-blog-post[data-reading-theme="light"] .post-meta-author img {
  border-color: rgba(0, 0, 0, 0.14);
}
body.page-blog-post[data-reading-theme="light"] .post-meta-author-name {
  color: #111111;
  text-shadow: none;
}
body.page-blog-post[data-reading-theme="light"] .post-meta-author-role {
  color: rgba(17, 17, 17, 0.55);
  text-shadow: none;
  font-weight: 300;
}
body.page-blog-post[data-reading-theme="light"] .post-meta-divider {
  background: rgba(0, 0, 0, 0.12);
}
body.page-blog-post[data-reading-theme="light"] .post-meta-item {
  color: rgba(17, 17, 17, 0.62);
  text-shadow: none;
  font-weight: 300;
}
body.page-blog-post[data-reading-theme="light"] .post-meta-item i {
  color: rgba(17, 17, 17, 0.4);
}
body.page-blog-post[data-reading-theme="light"] .post-share-label {
  color: rgba(17, 17, 17, 0.5);
  text-shadow: none;
}
body.page-blog-post[data-reading-theme="light"] .post-share a {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.03);
}
body.page-blog-post[data-reading-theme="light"] .post-share a:hover {
  background: #111111;
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.45);
}

body.page-blog-post[data-reading-theme="light"] .post-body p strong {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-body p em {
  color: rgba(17, 17, 17, 0.88);
}
body.page-blog-post[data-reading-theme="light"] .post-body ul,
body.page-blog-post[data-reading-theme="light"] .post-body ol {
  color: rgba(17, 17, 17, 0.82);
}
body.page-blog-post[data-reading-theme="light"] .post-body ul li::marker {
  color: rgba(17, 17, 17, 0.45);
}
body.page-blog-post[data-reading-theme="light"] .post-body th {
  color: #111111;
  border-bottom-color: rgba(0, 0, 0, 0.18);
}
body.page-blog-post[data-reading-theme="light"] .post-body td {
  color: rgba(17, 17, 17, 0.82);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.page-blog-post[data-reading-theme="light"] .post-body td strong {
  color: #111111;
}

body.page-blog-post[data-reading-theme="light"] .post-author-role {
  color: #3f6f7c;
}
body.page-blog-post[data-reading-theme="light"] .post-author-avatar {
  border-color: rgba(0, 0, 0, 0.12);
}

body.page-blog-post[data-reading-theme="light"] .post-cta {
  background: #f3f6f7;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
body.page-blog-post[data-reading-theme="light"] .post-cta-kicker {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] .post-cta h3 {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] .post-cta p {
  color: rgba(17, 17, 17, 0.72);
}

body.page-blog-post[data-reading-theme="light"] .post-related .glass-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
body.page-blog-post[data-reading-theme="light"] .post-related .text-white {
  color: #111111 !important;
}
body.page-blog-post[data-reading-theme="light"] .post-related .text-neutral-300,
body.page-blog-post[data-reading-theme="light"]
  .post-related
  .text-neutral-400 {
  color: rgba(17, 17, 17, 0.68) !important;
}
body.page-blog-post[data-reading-theme="light"] .post-related a.text-sm {
  color: rgba(17, 17, 17, 0.85);
}
body.page-blog-post[data-reading-theme="light"]
  .post-related
  .evm-slider-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

@media (max-width: 1023px) {
  body.page-blog-post[data-reading-theme="light"] .post-toc {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* --- from contato.html (block 1, escopado para body.page-contato) --- */
body.page-contato {
  --font-lufga: "Lufga", sans-serif;
}
body.page-contato {
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-lufga);
}

body.page-contato .page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  body.page-contato .page-shell {
    padding: 0 32px;
  }
}
@media (min-width: 1024px) {
  body.page-contato .page-shell {
    padding: 0 48px;
  }
}

/* ============================================================ HERO ============================================================ */
body.page-contato .contact-hero {
  position: relative;
  padding: 120px 0 56px;
  background-color: #0b0b0c;
  background-image: linear-gradient(180deg, #161618 0%, #0b0b0c 100%);
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  body.page-contato .contact-hero {
    padding: 152px 0 72px;
  }
}
@media (min-width: 1024px) {
  body.page-contato .contact-hero {
    padding: 172px 0 80px;
  }
}

body.page-contato .contact-hero-inner {
  max-width: 820px;
}
body.page-contato .contact-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 24px;
}
body.page-contato .contact-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7da9b5;
}

body.page-contato .contact-hero h1 {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 20px;
}
body.page-contato .contact-hero h1 strong {
  font-weight: 500;
}
body.page-contato .contact-hero p {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 640px;
}

/* ============================================================ CORPO: FORMULÁRIO + CARDS ============================================================ */
body.page-contato .contact-section {
  padding: 48px 0 96px;
}
@media (min-width: 1024px) {
  body.page-contato .contact-section {
    padding: 72px 0 120px;
  }
}

body.page-contato .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  body.page-contato .contact-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: start;
  }
}

/* Formulário */
body.page-contato .contact-form-wrap {
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}
@media (min-width: 768px) {
  body.page-contato .contact-form-wrap {
    padding: 44px 40px;
  }
}

body.page-contato .contact-form-head {
  margin-bottom: 28px;
}
body.page-contato .contact-form-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin-bottom: 8px;
}
body.page-contato .contact-form-head h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 8px;
}
body.page-contato .contact-form-head p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  margin: 0;
}

body.page-contato .contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.page-contato .contact-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  body.page-contato .contact-form-row.two-col {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-contato .contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.page-contato .contact-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
body.page-contato .contact-input,
body.page-contato .contact-textarea {
  width: 100%;
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 180ms, background-color 180ms;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
body.page-contato .contact-input::placeholder,
body.page-contato .contact-textarea::placeholder {
  color: rgba(255, 255, 255, 0.65); /* 2026-05-29: pedido cliente —
                                       melhorar legibilidade dos labels
                                       do form de contato (era 0.35). */
}
body.page-contato .contact-input:hover,
body.page-contato .contact-textarea:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
body.page-contato .contact-input:focus,
body.page-contato .contact-textarea:focus {
  border-color: rgba(125, 169, 181, 0.6);
  background: rgba(255, 255, 255, 0.05);
}
body.page-contato .contact-textarea {
  min-height: 140px;
  line-height: 1.5;
}

body.page-contato .contact-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
body.page-contato .contact-form-lgpd {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  max-width: 280px;
}
body.page-contato .contact-form-lgpd a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

body.page-contato .contact-submit {
  min-width: 180px;
  justify-content: center;
}

/* Sidebar — cards de contato direto */
body.page-contato .contact-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.page-contato .contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 200ms;
}
body.page-contato .contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
body.page-contato .contact-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(125, 169, 181, 0.15);
  border: 1px solid rgba(125, 169, 181, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7da9b5;
  font-size: 18px;
  flex-shrink: 0;
}
body.page-contato .contact-card-body {
  flex: 1;
  min-width: 0;
}
body.page-contato .contact-card-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
  margin: 0 0 4px;
}
body.page-contato .contact-card-value {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: #ffffff;
  margin: 0 0 2px;
  line-height: 1.3;
  word-break: break-word;
}
body.page-contato .contact-card-hint {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

/* Card WhatsApp — accent verde */
body.page-contato .contact-card-whatsapp .contact-card-icon {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.4);
  color: #25d366;
}

/* Card CTA final — azul sólido */
body.page-contato .contact-cta-card {
  padding: 28px 24px;
  border-radius: 16px;
  background: #254858;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
body.page-contato .contact-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 20% 30%,
      rgba(125, 169, 181, 0.3),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 80%,
      rgba(181, 212, 222, 0.15),
      transparent 55%
    );
  pointer-events: none;
}
body.page-contato .contact-cta-card-content {
  position: relative;
  z-index: 1;
}
body.page-contato .contact-cta-card-kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
  font-weight: 300;
}
body.page-contato .contact-cta-card h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 12px;
}
body.page-contato .contact-cta-card p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin: 0 0 20px;
}

/* Botão "Contato de imprensa" — mais padding */
body.page-contato .contact-cta-card .btn-evermonte {
  height: auto;
  padding: 12px 22px;
  line-height: 1.1;
}

/* ============================================================ MAPA / ENDEREÇO (opcional) ============================================================ */
body.page-contato .contact-location {
  padding: 0 0 96px;
}
body.page-contato .contact-location-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) {
  body.page-contato .contact-location-card {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-contato .contact-location-info {
  padding: 36px 32px;
}
@media (min-width: 768px) {
  body.page-contato .contact-location-info {
    padding: 48px 40px;
  }
}
body.page-contato .contact-location-info h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  margin: 0 0 12px;
}
body.page-contato .contact-location-address {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
  margin: 0 0 20px;
}
body.page-contato .contact-location-hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
body.page-contato .contact-location-hours strong {
  color: #ffffff;
  font-weight: 500;
}
body.page-contato .contact-location-map {
  min-height: 260px;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.65) 100%
    ),
    url("https://einstitute.com.br/wp-content/uploads/2024/09/foto2-contato.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 300;
}

/* --- from contato.html (block 2, escopado para body.page-contato) --- */
body.page-contato .contact-social {
  width: 34px;
  height: 34px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  transition: background-color 200ms, color 200ms, border-color 200ms;
  text-decoration: none;
  flex-shrink: 0;
}
body.page-contato .contact-social:hover {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
}

/* --- from index.html (block 1, escopado para body.page-index) --- */
body.page-index {
  --font-lufga: "Lufga", sans-serif;
}
body.page-index {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}
body.page-index {
  font-family: var(--font-lufga);
  line-height: var(--leading-text);
  overflow-x: hidden;
}

/* Hero title - ExtraLight 50px */
body.page-index .hero-title {
  font-family: var(--font-lufga);
  font-weight: 200;
  font-size: 50px;
  line-height: var(--leading-title);
  text-align: center;
  text-transform: capitalize;
}
body.page-index .hero-title strong {
  font-weight: 500;
}
/* Hero subtitle - Light 20px */
body.page-index .hero-subtitle {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 18px;
  line-height: var(--leading-text);
  text-align: center;
}
body.page-index .hero-subtitle strong {
  font-weight: 500;
}
/* Card title */
body.page-index .card-title {
  font-family: var(--font-lufga);
  font-weight: 500;
  font-size: 28px;
  line-height: var(--leading-title);
  text-align: left;
}
/* Card description */
body.page-index .card-desc {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 16px;
  line-height: var(--leading-text);
  text-align: left;
}
/* Card category */
body.page-index .card-category {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 12px;
  line-height: var(--leading-text);
  text-align: left;
}
/* Cards slider — vidro global em styles.css (.evermonte-glass + .evermonte-card) */
body.page-index .hero-slider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
  padding-right: 24px;
}
body.page-index .hero-slider-track::-webkit-scrollbar {
  display: none;
}
body.page-index .hero-slider-dot-outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
}
@media (max-width: 640px) {
  body.page-index {
    --leading-text: 1.5;
  }
  body.page-index .card-title {
    font-size: 22px;
  }
  body.page-index .card-desc {
    font-size: 18px;
    line-height: var(--leading-text);
  }
  body.page-index .hero-title {
    font-size: 36px;
    line-height: var(--leading-title);
  }
  body.page-index .hero-subtitle {
    font-size: 18px;
    line-height: var(--leading-text);
  }
}

/* ============================================================
           MOBILE-FIRST POLISH — aderente ao Design System
           ============================================================ */

/* Header mobile — compactar e dar espaço ao hamburger */
@media (max-width: 767px) {
  body[class*="page-"] #header {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  body[class*="page-"] #header img.h-8 {
    height: 26px;
  }
  body[class*="page-"] #header .js-open-login {
    display: none;
  }
  body[class*="page-"] #header .header-actions-desktop {
    display: none !important;
  }
  body[class*="page-"] #header nav {
    display: none !important;
  }
  body[class*="page-"] #header .header-mobile-trigger {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) {
  body[class*="page-"] #header .header-mobile-trigger {
    display: none !important;
  }
}

/* Botão hamburger (pill redondo, 41px, glass) — escondido por padrão */
body.page-index .hamburger {
  display: none;
  width: 41px;
  height: 41px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
body.page-index .hamburger:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
}
body.page-index .hamburger:hover .hamburger-line {
  background: #000;
}
body.page-index .hamburger-icon {
  width: 18px;
  height: 12px;
  position: relative;
}
body.page-index .hamburger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 250ms ease, opacity 200ms ease,
    background-color 200ms ease;
}
body.page-index .hamburger-line:nth-child(1) {
  top: 0;
}
body.page-index .hamburger-line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
body.page-index .hamburger-line:nth-child(3) {
  bottom: 0;
}
body.page-index .hamburger.is-open .hamburger-line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
body.page-index .hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
body.page-index .hamburger.is-open .hamburger-line:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Drawer mobile */
body.page-index .mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
body.page-index .mobile-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}
body.page-index .mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.page-index .mobile-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: rgba(21, 21, 21, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding: 80px 24px 32px;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
body.page-index .mobile-drawer.is-open .mobile-drawer-panel {
  transform: translateX(0);
}
body.page-index .mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
}
body.page-index .mobile-drawer-link {
  display: block;
  padding: 14px 16px;
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease,
    color 200ms ease;
}
body.page-index .mobile-drawer-link:hover,
body.page-index .mobile-drawer-link:focus-visible {
  background: #ffffff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.9);
  outline: none;
}
body.page-index .mobile-drawer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 8px 16px 16px;
}
body.page-index .mobile-drawer-meta {
  padding: 0 16px;
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 13px;
  color: #a3a3a3;
  margin-bottom: 16px;
}
body.page-index .mobile-drawer-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
body.page-index .mobile-drawer-ctas a {
  text-decoration: none;
}

/* HERO — aperto de escala e CTAs empilhados de forma hierárquica em mobile */
@media (max-width: 640px) {
  body.page-index #hero {
    min-height: 100svh;
  }
  body.page-index #hero .hero-subtitle {
    font-size: 14px;
  }
  body.page-index #hero .hero-cta-group {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  body.page-index #hero .hero-cta-group .btn-evermonte {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Cards do slider — menos padding pra respirar */
  body.page-index .evermonte-card {
    padding: 24px !important;
    min-height: 340px !important;
  }
  body.page-index .hero-slider-track {
    gap: 16px !important;
  }
}

/* Seção "Ver todas" — título + botão quebram com hierarquia em mobile */
@media (max-width: 640px) {
  body.page-index .section-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body.page-index .section-head-row > button,
  body.page-index .section-head-row > .btn-evermonte {
    align-self: flex-start;
  }
}

/* About: vídeo não ocupa 500px em mobile */
@media (max-width: 1023px) {
  body.page-index #about .about-video-wrapper {
    height: 280px !important;
  }
}
@media (max-width: 640px) {
  body.page-index #about .about-video-wrapper {
    height: 220px !important;
  }
  body.page-index #about .about-stats {
    flex-direction: column;
    gap: 24px !important;
  }
  body.page-index #about .about-stats .stat-num {
    font-size: 40px;
  }
}

/* ========================================================
           Tipografia utilitária mínima (substitui tokens Tailwind)
           ======================================================== */
body .evm-h2 {
  font-size: 1.875rem; /* ~ text-3xl */
  line-height: 1.15;
}
@media (min-width: 576px) {
  body .evm-h2 {
    font-size: 2.25rem;
  } /* ~ sm:text-4xl */
}
@media (min-width: 768px) {
  body .evm-h2 {
    font-size: 2.5rem;
  } /* ~ md:text-4xl (um pouco mais generoso) */
}

/* ========================================================
           Espaçamentos responsivos (substitui tokens Tailwind)
           ======================================================== */
body.page-index .evm-hero-slider {
  padding-top: 3rem; /* ~ py-5 */
  padding-bottom: 3rem;
}
@media (min-width: 576px) {
  body.page-index .evm-hero-slider {
    padding-top: 3.5rem; /* ~ sm:py-14 */
    padding-bottom: 3.5rem;
  }
}
@media (min-width: 768px) {
  body.page-index .evm-hero-slider {
    padding-top: 4rem; /* ~ md:py-16 */
    padding-bottom: 4rem;
  }
}
/* Slider da Home de ponta a ponta (full-bleed) — pedido Maickel 30/06.
   Tira o limite do .container centralizado; ocupa a largura total da tela,
   com um respiro à esquerda (gutter padrão) e bleed à direita (a faixa
   rola horizontalmente). As setas seguem coladas nas bordas da viewport. */
body.page-index .evm-hero-slider {
  max-width: none;
  width: 100%;
  padding-left: 24px;
  padding-right: 0;
}
@media (min-width: 640px) {
  body.page-index .evm-hero-slider { padding-left: 32px; }
}
@media (min-width: 1024px) {
  body.page-index .evm-hero-slider { padding-left: 48px; }
}

/* ========================================================
           Inputs (substitui padding/tamanho/placeholder/focus)
           ======================================================== */
body .glass-input.evm-input {
  width: 100%;
  padding: 0.75rem 0.75rem; /* px-3 py-3-ish */
  font-size: 0.875rem; /* text-sm */
  color: #fff;
  border-radius: 1rem; /* similar ao rounded-4 */
  outline: none;
}
body .glass-input.evm-input::placeholder {
  color: rgba(255, 255, 255, 0.65); /* branco semi-transparente, 2026-05-29
                                       pedido cliente: melhorar legibilidade
                                       dos labels do form sobre fundo escuro */
  opacity: 1;
}
body .glass-input.evm-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
body .glass-input.evm-input--compact {
  padding: 0.625rem 0.75rem; /* px-3 py-2.5 */
}
body .glass-input.evm-input--compact:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}

/* Select do form do Institute Hub ("Como você chegou até nós?", Helena 2026-07-31):
   mesma aparência dos inputs. Enquanto a opção-placeholder (disabled) estiver
   selecionada, o texto fica apagado como um placeholder. As <option> no menu do
   SO ficam com texto escuro (fundo branco nativo). */
body select.glass-input.evm-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
body select.glass-input.evm-input:required:invalid {
  color: rgba(255, 255, 255, 0.65);
}
body select.glass-input.evm-input option {
  color: #111;
}
body select.glass-input.evm-input option[value=""][disabled] {
  color: #777;
}

/* Mensagem de erro do envio AJAX do form (Institute Hub). */
.evm-newsletter-error {
  color: #ffb4b4;
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
}

/* Seta de scroll das páginas de soluções (Helena 2026-07-31): trocar o glifo "↓"
   pelo mesmo SVG de traço uniforme 1.3px usado na Insights / detalhe do post. O
   markup (o SVG dentro do .evm-hero-arrow) vem do DB; aqui neutralizamos o círculo
   /borda/glifo antigos que também vêm do CSS no DB — por isso os !important. */
.evm-hero-arrow {
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.evm-hero-arrow::before,
.evm-hero-arrow::after {
  content: none !important;
  display: none !important;
}
.evm-hero-arrow svg {
  width: 46px !important;
  height: 46px !important;
  display: block;
}

/* ========================================================
           Layout semântico (reduz utilitários Tailwind/Bootstrap)
           ======================================================== */
/* DS v1.2 (2026-05-29): pedido da cliente — reduzir 25% pra layout mais
   compacto / leitura mais fluida. Valores antigos: 4rem/5rem/6rem. */
body .evm-section-pad {
  padding-top: 3rem; /* ~ py-12 */
  padding-bottom: 3rem;
}
@media (min-width: 576px) {
  body .evm-section-pad {
    padding-top: 3.75rem; /* ~ sm:py-15 */
    padding-bottom: 3.75rem;
  }
}
@media (min-width: 992px) {
  body .evm-section-pad {
    padding-top: 4.5rem; /* ~ lg:py-18 */
    padding-bottom: 4.5rem;
  }
}

body .evm-maxw-4xl {
  max-width: 56rem; /* ~ max-w-4xl */
  margin-left: auto;
  margin-right: auto;
}

body .evm-maxw-3xl {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

body .evm-maxw-2xl {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.evm-page-shell {
  background: #000;
  overflow-x: hidden;
}

body.page-index .evm-panel-rounded-lg {
  border-radius: 25px;
}

.evm-hero-scrim {
  background: rgba(0, 0, 0, 0.2);
}
/* Sombreamento na transição hero → 1ª seção (pedido cliente 2026-07-28): o vídeo
   dissolve num degradê preto na base, integrando com a seção #about (bg-black) e
   suavizando a divisão. Acima do vídeo/scrim (z-0), abaixo do conteúdo (z-10). */
body.page-index #hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.95) 85%,
    #000 100%
  );
}
/* Vídeo de fundo do hero (Maickel 2026-07-22): cobre toda a seção, atrás do
   scrim e do conteúdo (z-0). O scrim (DOM logo após) pinta por cima; conteúdo é z-10. */
body.page-index #hero .evm-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Esconde o botão de "play" NATIVO que o iOS/Safari (e Chrome mobile em
   modo economia/autoplay bloqueado) sobrepõe nos vídeos de fundo mudos.
   Esses vídeos são decorativos (aria-hidden, pointer-events:none) e nunca
   devem exibir controle. Se o Low Power Mode do iOS impedir o autoplay, o
   vídeo simplesmente fica parado no 1º frame (como um poster) — sem botão.
   Pedido cliente 2026-07-30 (Andreia): "o ícone de play do mobile não pode ficar". */
.evm-hero-bg-video::-webkit-media-controls,
.evm-hero-bg-video::-webkit-media-controls-enclosure,
.evm-hero-bg-video::-webkit-media-controls-panel,
.evm-hero-bg-video::-webkit-media-controls-start-playback-button,
.evm-hero-bg-video::-webkit-media-controls-overlay-play-button,
.interdep-video::-webkit-media-controls,
.interdep-video::-webkit-media-controls-start-playback-button,
.interdep-video::-webkit-media-controls-overlay-play-button,
.about-video::-webkit-media-controls,
.about-video::-webkit-media-controls-start-playback-button,
.about-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Vídeos decorativos (autoplay + muted, sem controls) em QUALQUER página — esconde o
   botão de play NATIVO que o Safari/macOS sobrepõe quando o autoplay é bloqueado (Low
   Power Mode ou "Auto-Play: Never" nas prefs do Safari). O seletor mira o PADRÃO de
   vídeo de fundo (autoplay+muted, sem controls), então cobre TODOS — heros das soluções
   (.evm-hero-video), Insights (.evm-hero-insights-video), abas do #solutions, seção
   "O Evermonte Institute", vídeos vindos do DB, etc. — atuais e futuros, sem depender de
   classe/aria em cada um. Sem autoplay, mostra só o poster/1º frame (sem ícone). Vídeos
   com `controls` (se houver algum de conteúdo) ficam intactos. (Léo/Helena 2026-08-01.)
   O JS initBackgroundVideos ainda religa o play na 1ª interação. */
video[autoplay][muted]:not([controls])::-webkit-media-controls,
video[autoplay][muted]:not([controls])::-webkit-media-controls-enclosure,
video[autoplay][muted]:not([controls])::-webkit-media-controls-panel,
video[autoplay][muted]:not([controls])::-webkit-media-controls-start-playback-button,
video[autoplay][muted]:not([controls])::-webkit-media-controls-overlay-play-button,
video[aria-hidden="true"]::-webkit-media-controls,
video[aria-hidden="true"]::-webkit-media-controls-start-playback-button,
video[aria-hidden="true"]::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}

#header.evm-hero-header {
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.2),
    transparent
  );
}
#header.evm-hero-header .evm-header-inner {
  pointer-events: auto;
}

.evm-header-login {
  transition: opacity 0.2s ease;
}
.evm-header-login:hover {
  opacity: 0.8;
}

body.page-index .evm-hero-stage {
  padding-top: 6rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  body.page-index .evm-hero-stage {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100vh;
  }
}

body.page-index .evm-hero-card-cta {
  align-self: flex-start;
  text-align: left;
  width: fit-content;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body.page-index .evm-hero-card-cta:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.page-index .hero-slider-dot {
  width: 0.5rem;
  height: 0.5rem;
  cursor: pointer;
}

body.page-index .keywords-line.evm-keywords-line {
  color: #737373;
  letter-spacing: 0.06em;
}

body.page-index #materials .evm-materials-intro {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

body.page-index #materials .evm-materials-chip {
  font-size: 0.75rem;
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
}

body.page-index #materials .glass-card-materials > .evm-materials-copy {
  flex: 1 1 auto;
  min-height: 0;
  color: rgba(255, 255, 255, 0.95);
}

/* Vitrines home — limitar o texto da descrição e dar respiro até o botão
   (Maickel 23/07). O clamp precisa ficar num elemento interno (.evm-clamp):
   aplicado direto no <p>, que é flex-item, o `-webkit-box` é blockificado e
   o line-clamp não faz efeito. A margem no <p> garante o respiro mínimo
   entre a descrição e o link/botão mesmo no card mais cheio. */
body.page-index #materials .glass-card-materials > .evm-materials-copy,
body.page-index #news .evm-slider-card > p {
  margin-bottom: 1.75rem;
}
body.page-index #materials .evm-materials-copy .evm-clamp,
body.page-index #news .evm-slider-card > p .evm-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.page-index
    #materials
    .materials-slider
    .evm-slider-card.materials-highlight {
    grid-column: span 2 / span 2;
  }
}

body.page-index #materials a.evm-link-inverse,
body.page-index #news a.evm-link-inverse {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
}

body.page-index #materials a.evm-link-inverse:hover,
body.page-index #news a.evm-link-inverse:hover {
  text-decoration: underline;
}

body.page-index footer .evm-footer-main {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

body.page-index footer ul.evm-stack-list > li + li {
  margin-top: 0.25rem;
}

footer ul.evm-stack-list.evm-stack-list--relaxed > li + li {
  margin-top: 0.5rem;
}

body.page-index footer .evm-footer-social-link {
  cursor: pointer;
  transition: color 0.15s ease;
}

body.page-index footer .evm-footer-social-link:hover {
  color: #fff !important;
}

body.page-index footer .evm-footer-legal {
  font-size: 11px;
}

body.page-index footer .evm-footer-legal-link {
  cursor: pointer;
  transition: color 0.15s ease;
}

body.page-index footer .evm-footer-legal-link:hover {
  color: #d4d4d4 !important;
}

body.page-index #newsletter .newsletter-submit.evm-newsletter-submit {
  height: auto !important;
}

#login-modal.evm-login-modal {
  z-index: 1055;
}

#login-modal .evm-login-backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#login-modal .evm-login-dialog {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  #login-modal .evm-login-dialog {
    padding: 2.5rem !important;
  }
}

#login-modal #login-form.evm-login-form-stack > * + *,
#login-modal #recover-form.evm-login-form-stack > * + * {
  margin-top: 1.25rem;
}

#login-modal .evm-login-kicker {
  color: rgba(255, 255, 255, 0.5);
}

#login-modal .evm-login-label {
  color: rgba(255, 255, 255, 0.75);
}

#login-modal .evm-login-muted {
  color: rgba(255, 255, 255, 0.7);
}

#login-modal .evm-login-close-btn {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 0;
  padding: 0;
  transition: color 0.15s ease;
}

#login-modal .evm-login-close-btn:hover {
  color: #fff;
}

#login-modal .evm-login-link-btn {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

#login-modal .evm-login-link-btn:hover {
  color: #fff;
}

/* Soluções: trilho responsivo (scroll no mobile, grid no desktop) */
body.page-index #solutions .solutions-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
body.page-index #solutions .solution-card-link .evm-solution-link-ico {
  font-size: 0.75rem;
  opacity: 0.85;
}

body.page-index #solutions .solutions-track > .solutions-card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
}
@media (min-width: 992px) {
  /* legacy grid disabled — see PATCH 2026-05-19 */
}
/* Soluções: conteúdo do card ocupa altura sem precisar flex-grow/min-h */
body.page-index #solutions .solutions-card .leading-relaxed {
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================
   Vitrine da home = mesmos cards das páginas internas (.dim-*)
   Maickel 2026-07-22 ("Ajustar Vitrine"). CSS escopado em
   body.page-index #solutions para não vazar. --font-lufga já é global.
   ============================================================ */
body.page-index #solutions .dim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
}
body.page-index #solutions .dim-grid--4 { grid-template-columns: repeat(4, 1fr); }

body.page-index #solutions .dim-card {
  background: #000;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color .3s ease;
}
body.page-index #solutions .dim-card:hover { border-color: rgba(255,255,255,.22); }

body.page-index #solutions .dim-fig {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
  background: #070707;
}
body.page-index #solutions .dim-fig img,
body.page-index #solutions .dim-fig video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

body.page-index #solutions .dim-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
body.page-index #solutions .dim-eyebrow {
  font-family: var(--font-lufga);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
body.page-index #solutions .dim-title {
  font-family: var(--font-lufga);
  font-weight: 300 !important;
  font-size: 24px !important;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 14px;
  text-align: left;
}
body.page-index #solutions .dim-title small {
  display: block;
  font-size: .6em;
  font-weight: 300;
  color: rgba(255,255,255,.62);
}
body.page-index #solutions .dim-title small strong { font-weight: 500; color: #fff; }

body.page-index #solutions .dim-desc {
  font-family: var(--font-lufga);
  font-weight: 300 !important;
  font-size: 15px !important;
  color: #fff !important;
  line-height: 1.55 !important;
  margin: 0 0 22px;
  text-align: left;
}

body.page-index #solutions .dim-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.14);
  margin-bottom: 20px;
}

body.page-index #solutions .dim-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
body.page-index #solutions .dim-items li {
  position: relative;
  padding-left: 16px;
}
body.page-index #solutions .dim-items li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
}
body.page-index #solutions .dim-items strong {
  display: block;
  font-family: var(--font-lufga);
  font-weight: 600;
  font-size: 15px !important;
  color: #fff !important;
  margin-bottom: 4px;
}
body.page-index #solutions .dim-items span {
  display: block;
  font-family: var(--font-lufga);
  font-weight: 200 !important;
  font-size: 15px !important;
  color: #fff !important;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  body.page-index #solutions .dim-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  body.page-index #solutions .dim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.page-index #solutions .dim-grid--4 { grid-template-columns: 1fr; }
}

/* Cards do slider (Últimos conteúdos / posts): a descrição absorve a folga
   (flex-grow) para alinhar os botões ao rodapé; título com altura natural. */
body.page-index #news .evm-slider-card h3 {
  flex: 0 0 auto;
}
body.page-index #news .evm-slider-card > p {
  flex: 1 1 auto;
  min-height: 0;
}

/* Service detail: cards e features sem utilitários Tailwind */
body .service-pillar-card > p {
  flex: 1 1 auto;
  min-height: 0;
}
body #succession-impact .col.d-flex {
  min-height: 0;
}
body #succession-impact .evm-feature-body {
  padding-left: 1rem; /* ~ ps-3 */
  gap: 0.5rem; /* ~ gap-2 */
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 768px) {
  body #succession-impact .evm-feature-body {
    padding-left: 1.5rem; /* ~ md:pl-6 */
  }
}

/* Performance / Interdependências — larguras forçadas em mobile */
@media (max-width: 767px) {
  body.page-index #performance-insight .content-wrapper,
  body.page-index #interdependencias .content-wrapper {
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.page-index #performance-insight h2,
  body.page-index #interdependencias h2 {
    font-size: 26px !important;
    line-height: 1.2;
  }
}

/* Performance / Interdependências — no desktop ocupam apenas a parte esquerda */
@media (min-width: 768px) {
  body.page-index #performance-insight .content-wrapper,
  body.page-index #interdependencias .content-wrapper {
    max-width: 640px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}

/* Materials — em mobile, fundo azul ocupa 100% horizontal, sem borda arredondada */
@media (max-width: 767px) {
  /* Neutraliza o page-gutter do wrapper pai e tira o rounded */
  body.page-index #materials {
    padding: 48px 0 !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    border-radius: 0 !important;
    width: calc(100% + 48px) !important;
  }
  /* Title e subtitle alinhados ao mesmo padding horizontal dos cards (24px interno) */
  body.page-index #materials > div:first-child {
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: left !important;
  }
  body.page-index #materials h2 {
    font-size: 28px !important;
  }
  body.page-index .glass-card-materials {
    padding: 24px !important;
  }
  body.page-index .glass-card-materials h3 {
    font-size: 18px !important;
  }
}
/* Materials links — sempre brancos, independente de estado :visited */
body.page-index #materials a {
  color: #ffffff !important;
}
body.page-index #materials a:hover {
  text-decoration: underline;
}

/* Solutions — tabs estilizadas como pills em mobile, funcionais em todos os breakpoints */
@media (max-width: 767px) {
  body.page-index #solutions {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page-index #solutions .solutions-inner {
    padding: 0 24px;
  }

  /* Tabs em linha com scroll, estilizadas como pills */
  body.page-index #solutions .solutions-tabs-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 10px;
    padding: 4px 24px 10px;
    border-bottom: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-index #solutions .solutions-tabs-row::-webkit-scrollbar {
    display: none;
  }

  body.page-index #solutions .solutions-tab {
    display: inline-flex !important;
    align-items: center !important;
    height: 38px;
    padding: 0 16px !important;
    font-size: 14px;
    font-weight: 400;
    color: #d4d4d4 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background-color 200ms, color 200ms, border-color 200ms;
    cursor: pointer;
  }
  body.page-index #solutions .solutions-tab:hover {
    background: #ffffff !important;
    color: #000 !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
  }
  body.page-index #solutions .solutions-tab[aria-selected="true"],
  body.page-index #solutions .solutions-tab.is-active {
    background: #ffffff !important;
    color: #000 !important;
    border-color: #ffffff !important;
    font-weight: 500;
  }

  /* Track dos cards: força flex + scroll horizontal */
  body.page-index #solutions .solutions-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  body.page-index #solutions .solutions-track::before,
  body.page-index #solutions .solutions-track::after {
    content: "";
    flex: 0 0 24px;
  }
  body.page-index #solutions .solutions-card {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    scroll-snap-align: start;
  }

  body.page-index #solutions [data-tab-panel] > p {
    font-size: 16px !important;
    padding: 0 24px;
  }
  body.page-index #solutions .keywords-line {
    padding: 0 24px;
    font-size: 10px !important;
  }
}

/* Desktop: tabs com sublinha (visual original) */
@media (min-width: 768px) {
  body.page-index #solutions .solutions-tabs-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 32px;
  }
  body.page-index #solutions .solutions-tab {
    padding: 14px 20px;
    font-size: 15px;
    color: #a3a3a3;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 200ms, border-color 200ms;
    font-family: "Lufga", sans-serif;
    font-weight: 400;
    white-space: nowrap;
  }
  body.page-index #solutions .solutions-tab:hover {
    color: #ffffff;
  }
  body.page-index #solutions .solutions-tab[aria-selected="true"],
  body.page-index #solutions .solutions-tab.is-active {
    color: #ffffff;
    border-bottom-color: #ffffff;
    font-weight: 500;
  }
}

/* News — cards e título mais limpos em mobile, alinhados na mesma coluna.
           O wrapper pai já tem page-gutter (24px). O slider tinha ::before/::after
           com 24px que somava ao padding dando desalinhamento. Em mobile, escondemos
           esse respiro do track e o primeiro card alinha em 24px com o título.
           A margem-right negativa no slider faz o último card "sangrar" até a borda
           direita da tela, permitindo que o scroll horizontal funcione bem. */
@media (max-width: 767px) {
  body.page-index #news h2 {
    font-size: 28px;
  }
  body.page-index #news .glass-card h3 {
    font-size: 17px;
  }
  body.page-index #news .evm-slider-track::before,
  body.page-index #news .evm-slider-track::after {
    display: none !important;
  }
  body.page-index #news .evm-slider {
    margin-right: -24px;
  }
}

/* Slider "Últimos conteúdos" (#news) — e-mail Maickel 01/07:
   (1) último card não corta a linha da direita, (2) 1º card alinhado ao título,
   (3) botão "Ler mais" no rodapé do card. Escopado em #news p/ não afetar outros sliders. */
@media (min-width: 1024px) {
  body.page-index #news .evm-slider-track {
    display: flex !important;
    overflow-x: auto !important;
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
  }
  body.page-index #news .evm-slider-track::before,
  body.page-index #news .evm-slider-track::after {
    display: none !important;
  }
  /* 4 cards preenchem exatamente a largura do container (flush nas duas bordas).
     Container = max-width:80% (config): usa 20vw p/ casar em qualquer largura
     (o calc com % resolvia errado por causa do scroll). Card = (80vw - 24px gutter - 72px gaps)/4. */
  body.page-index #news .evm-slider-card {
    flex: 0 0 calc(20vw - 24px) !important;
    max-width: none !important;
    min-width: 0 !important; /* deixa o flex-basis mandar (senão min-content ~186px infla o card) */
    scroll-snap-align: start;
  }
  /* setas na margem externa (não sobre os cards, que agora ficam flush) */
  body.page-index #news .evm-slider-arrow--prev { left: -52px; }
  body.page-index #news .evm-slider-arrow--next { right: -52px; }
}
/* Botão "Ler mais" empurrado para a base do card (cards têm altura igual) */
body.page-index #news .evm-slider-card .evm-link-inverse {
  margin-top: auto;
}

/* Newsletter — form com melhor espaçamento + botão no padrão 41px */
@media (max-width: 640px) {
  body.page-index #newsletter {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  body.page-index #newsletter .glass-card {
    padding: 32px 20px !important;
  }
  body.page-index #newsletter h2 {
    font-size: 26px !important;
  }
  body.page-index #newsletter .newsletter-submit {
    height: 48px !important;
    padding: 0 24px !important;
    width: 100%;
  }
}
/* Newsletter — inputs com tamanho e layout garantidos em qualquer breakpoint */
body.page-index #newsletter form .glass-input {
  width: 100%;
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  color: #ffffff;
  display: block;
}
body.page-index #newsletter form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.page-index #newsletter form > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  body.page-index #newsletter form > div.two-col {
    grid-template-columns: 1fr 1fr;
  }
}
body.page-index #newsletter .newsletter-submit {
  align-self: center;
  margin-top: 8px;
}

/* Footer — regras do layout antigo (5 colunas) removidas 2026-07-21;
   o rodapé novo (.site-footer) traz o próprio grid responsivo inline. */
/* Footer — resetar listas e tipografia de forma garantida */
body.page-index footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-index footer ul li {
  padding: 0;
}
body.page-index footer a {
  text-decoration: none;
  color: inherit;
}
body.page-index footer a:hover {
  color: #ffffff;
}

/* Modais de login — forçar oculto até JS abrir (evita render in-flow em caso de falha de JS/CSS) */
.js-login-modal[hidden],
#login-modal[hidden],
[data-modal-login][hidden] {
  display: none !important;
}
.js-login-modal:not(.is-open),
#login-modal:not(.is-open) {
  display: none;
}

/* Ajustes gerais para mobile: tipografia mais comportada */
@media (max-width: 640px) {
  body.page-index h2 {
    line-height: 1.2;
  }
  body.page-index .section-kicker {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

/* Evita scroll horizontal acidental em qualquer breakpoint.
   `clip` (não `hidden`) p/ não virar container de scroll e manter a barra overlay
   do macOS (mesmo motivo do html,body global — Maickel 2026-07-30). */
body.page-index {
  overflow-x: clip;
  max-width: 100vw;
}

/* ============================================================
           Normalização final — aderente ao DS v1.1
           ============================================================ */
/* Raio 16px nos cards (DS) — sobrescreve o 25px legado do styles.css */
body.page-index .glass-card,
body.page-index .evermonte-glass,
body.page-index .evermonte-card,
body.page-index .glass-card-materials {
  border-radius: 16px !important;
}

/* Links internos de cards — sempre brancos, nunca azul/roxo default */
body.page-index .glass-card a:not(.btn-evermonte),
body.page-index .glass-card-materials a:not(.btn-evermonte),
body.page-index #news a:not(.btn-evermonte),
body.page-index #about a:not(.btn-evermonte) {
  color: #ffffff;
  text-decoration: none;
}
body.page-index .glass-card a:not(.btn-evermonte):hover,
body.page-index .glass-card-materials a:not(.btn-evermonte):hover,
body.page-index #news a:not(.btn-evermonte):hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
/* Buttons - height 41, border-radius 100px */
body.page-index .btn-evermonte {
  height: 36px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-lufga);
  font-weight: 400;
  /* 2026-06-18: padrão global de botões = 11px (era 15px na home/page-index). */
  font-size: 11px;
}
body.page-index .btn-evermonte-filled {
  background: #d9d9d9;
  color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
body.page-index .btn-evermonte-filled-white {
  background: #ffffff;
  color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
body.page-index .btn-evermonte-outline {
  background: transparent;
  color: #ffffff;
}
body.page-index #tab-content .solution-card-link {
  font-family: var(--font-lufga);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: #ffffff;
  border: none;
  background: transparent;
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  align-self: flex-start;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
body.page-index #tab-content .solution-card-link:hover {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  background: transparent;
}
body.page-index .btn-nav {
  height: 41px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 15px;
}

/* Soluções — mobile: abas com scroll + carrossel (1 por vez) */
body.page-index .solutions-tabs-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.page-index .solutions-tabs-row::-webkit-scrollbar {
  display: none;
}

body.page-index .solutions-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 10px;
  padding-right: 24px;
}
body.page-index .solutions-track::-webkit-scrollbar {
  display: none;
}
body.page-index .solutions-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(86vw, 420px);
}

/* Mobile/tablet (< 1024px): 1 card por vez, estilo hero slider */
@media (max-width: 1023px) {
  body.page-index .solutions-track {
    gap: 24px;
  }
  body.page-index .solutions-card {
    width: 100%;
    min-width: 100%;
  }
}

body.page-index .solutions-dot-outline {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
}

@media (min-width: 1024px) {
  /* legacy grid disabled — see PATCH 2026-05-19 */
}

@media (max-width: 640px) {
  body.page-index #solutions .solutions-tab {
    font-size: 14px;
    padding: 12px 14px;
    white-space: nowrap;
  }
  body.page-index #solutions .solutions-kicker {
    font-size: 14px;
  }
  body.page-index #solutions .solutions-title {
    font-size: 28px;
    line-height: 1.1;
  }
}

/* --- from master-page.html (block 1, escopado para body.page-master-page) --- */
/* (placeholder removido: regra inválida) */

/* --- from service-detail.html (block 1, escopado para body.page-service-detail) --- */
body.page-service-detail {
  --font-lufga: "Lufga", sans-serif;
}
body.page-service-detail {
  margin: 0;
  padding: 0;
  width: 100%;
}
body.page-service-detail {
  font-family: var(--font-lufga);
  line-height: var(--leading-text);
}
body.page-service-detail .service-hero-title {
  font-family: var(--font-lufga);
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.125rem);
  line-height: var(--leading-title);
}
body.page-service-detail .service-hero-title strong {
  font-weight: 500;
}
body.page-service-detail .service-hero-subtitle {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: var(--leading-text);
}
body.page-service-detail .btn-nav {
  height: 41px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 15px;
}
body.page-service-detail .section-kicker {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* Hero topo — substitui pt-32/md:pt-36/lg:pt-40 + pb-16/md:pb-20 + min-h-[90vh] */
body.page-service-detail .service-detail-hero-main {
  position: relative;
  z-index: 10;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  body.page-service-detail .service-detail-hero-main {
    padding-top: 9rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 992px) {
  body.page-service-detail .service-detail-hero-main {
    padding-top: 10rem;
  }
}

/* Linha divisória — h-px w-[min(640px,72%)] bg-white/40 */
body.page-service-detail .service-detail-hero-divider {
  height: 1px;
  width: min(640px, 72%);
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 3rem;
}

/* Parágrafo corpo — text-white/80 + responsive type + leading + max-w-3xl */
body.page-service-detail .service-detail-hero-lead {
  font-family: var(--font-lufga);
  font-weight: 300;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.5;
  max-width: 48rem;
}
@media (min-width: 576px) {
  body.page-service-detail .service-detail-hero-lead {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  body.page-service-detail .service-detail-hero-lead {
    font-size: 1.125rem;
  }
}

/* CTAs do hero — px/sm + min-h-[44px] + text-sm/sm:text-[15px] */
body.page-service-detail .service-detail-hero-cta {
  font-family: var(--font-lufga);
  font-weight: 300;
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: 44px;
  font-size: 0.875rem;
}
@media (min-width: 576px) {
  body.page-service-detail .service-detail-hero-cta {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 15px;
  }
}

/* Faixa antes do pipeline statement */
body.page-service-detail .service-detail-pipeline-strip {
  position: relative;
  z-index: 10;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}
@media (min-width: 576px) {
  body.page-service-detail .service-detail-pipeline-strip {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 768px) {
  body.page-service-detail .service-detail-pipeline-strip {
    padding-top: 7rem;
    padding-bottom: 8rem;
  }
}
@media (min-width: 992px) {
  body.page-service-detail .service-detail-pipeline-strip {
    padding-top: 8rem;
    padding-bottom: 10rem;
  }
}
@media (min-width: 1200px) {
  body.page-service-detail .service-detail-pipeline-strip {
    padding-top: 9rem;
    padding-bottom: 11rem;
  }
}

/* Vidro pipeline — padding + min-height responsivos */
body.page-service-detail .service-detail-pipeline-glass {
  min-height: min(320px, 52vh);
  padding: 1rem;
}
@media (min-width: 576px) {
  body.page-service-detail .service-detail-pipeline-glass {
    padding: 2.5rem;
  }
}
@media (min-width: 768px) {
  body.page-service-detail .service-detail-pipeline-glass {
    min-height: min(360px, 52vh);
    padding: 6rem;
  }
}
@media (min-width: 992px) {
  body.page-service-detail .service-detail-pipeline-glass {
    padding: 7rem;
  }
}
@media (min-width: 1200px) {
  body.page-service-detail .service-detail-pipeline-glass {
    padding: 8rem;
  }
}
@media (min-width: 1400px) {
  body.page-service-detail .service-detail-pipeline-glass {
    padding: 9rem;
  }
}

body.page-service-detail .service-detail-pipeline-copy {
  max-width: 100%;
}
@media (min-width: 992px) {
  body.page-service-detail .service-detail-pipeline-copy {
    max-width: 35vw;
  }
}

/* Bloco final citação + logo — rounded + paddings em escada */
body.page-service-detail .succession-impact-footer-band {
  border-radius: 25px;
  padding: 3.5rem 1rem 1.25rem;
  text-align: center;
}
@media (min-width: 576px) {
  body.page-service-detail .succession-impact-footer-band {
    padding: 4rem 2rem 1.25rem;
  }
}
@media (min-width: 768px) {
  body.page-service-detail .succession-impact-footer-band {
    padding: 7rem 3.5rem 5rem;
  }
}
@media (min-width: 992px) {
  body.page-service-detail .succession-impact-footer-band {
    padding: 8rem 4rem 6rem;
  }
}
@media (min-width: 1200px) {
  body.page-service-detail .succession-impact-footer-band {
    padding: 9rem 4.5rem 7rem;
  }
}

body.page-service-detail
  .succession-impact-footer-band
  > .succession-impact-closing-text:first-of-type {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  body.page-service-detail
    .succession-impact-footer-band
    > .succession-impact-closing-text:first-of-type {
    margin-bottom: 5rem;
  }
}
@media (min-width: 992px) {
  body.page-service-detail
    .succession-impact-footer-band
    > .succession-impact-closing-text:first-of-type {
    margin-bottom: 6rem;
  }
}

body.page-service-detail .succession-impact-card-icon {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

body.page-service-detail .service-pillar-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.page-service-detail .service-related-card {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body.page-service-detail .service-related-card .service-related-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
body.page-service-detail .service-related-card:hover .service-related-bg {
  transform: scale(1.05);
}
body.page-service-detail .service-related-card .service-related-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.25) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
}
body.page-service-detail .service-img-band {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  isolation: isolate;
}
/* Pipeline statement — Lufga Light 60px / line-height 65px (máx.), letter-spacing 0 */
body.page-service-detail .pipeline-statement-title {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.5rem, 5vw, 60px);
  line-height: clamp(2rem, 5.4vw, 65px);
  letter-spacing: 0;
  color: #fff;
}
body.page-service-detail .pipeline-statement-title strong {
  font-weight: 500;
}
body.page-service-detail .pipeline-statement-lead {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-style: normal;
  font-size: 25px;
  line-height: 100%;
  letter-spacing: 0;
  color: #fff;
}
/* #succession-impact — título (Lufga Light 60px / leading 65px no máximo) */
body.page-service-detail .succession-impact-hero-title {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(2rem, 4.6vw, 60px);
  /* 55px em 60px pode “colar” visualmente dependendo do recorte da fonte */
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
}
body.page-service-detail .succession-impact-hero-title strong {
  font-weight: 500;
}
body.page-service-detail .succession-impact-hero-subtitle {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.125rem, 2.2vw, 25px);
  line-height: 1.3;
  letter-spacing: 0;
}
/* Parágrafo intro — Lufga Light 25px / leading confortável */
body.page-service-detail .succession-impact-intro-text {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.25rem, 2.5vw, 28px);
  line-height: 1.35;
  letter-spacing: 0;
}
body.page-service-detail .succession-impact-card-title {
  font-family: var(--font-lufga);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2rem, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: 0;
}
body.page-service-detail .succession-impact-card-text {
  font-family: var(--font-lufga);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.25rem, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
}
/* Citação final — Lufga Medium 60px / 65px */
body.page-service-detail .succession-impact-closing-text {
  font-family: var(--font-lufga);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.5rem, 5vw, 60px);
  line-height: clamp(2rem, 5.4vw, 65px);
  letter-spacing: 0;
  text-align: center;
}
body.page-service-detail .succession-impact-closing-text strong {
  font-weight: 500;
}
/* Outras soluções — carrossel (borda fina, fundo preto, sem vidro) */
body.page-service-detail .other-solutions-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}
body.page-service-detail .other-solutions-track::-webkit-scrollbar {
  display: none;
}
body.page-service-detail .other-solutions-card {
  width: 380px;
  min-width: 380px;
  max-width: 100%;
  min-height: 400px;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}
body.page-service-detail .other-solutions-card:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}
body.page-service-detail .other-solutions-card:hover h3,
body.page-service-detail .other-solutions-card:hover p {
  color: #000000 !important;
}
body.page-service-detail .other-solutions-card:hover a {
  background: #000000;
  border-color: #000000;
  color: #ffffff !important;
}
body.page-service-detail .other-solutions-card:hover a:hover {
  background: rgba(0, 0, 0, 0.85);
}
@media (max-width: 640px) {
  body.page-service-detail .other-solutions-card {
    min-width: 300px;
    min-height: 360px;
  }
}
body.page-service-detail .other-solutions-dot-outline {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* --- from sobre.html (block 1, escopado para body.page-sobre) --- */
body.page-sobre {
  --font-lufga: "Lufga", sans-serif;
}
body.page-sobre {
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-lufga);
}

body.page-sobre .page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  body.page-sobre .page-shell {
    padding: 0 32px;
  }
}
@media (min-width: 1024px) {
  body.page-sobre .page-shell {
    padding: 0 48px;
  }
}

/* ============================================================ HERO ============================================================ */
body.page-sobre .about-hero {
  position: relative;
  padding: 120px 0 72px;
  background-image: linear-gradient(
      180deg,
      #000000 0%,
      #000000 40%,
      #000000 100%
    ),
    url("background-interna.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  body.page-sobre .about-hero {
    padding: 152px 0 88px;
  }
}
@media (min-width: 1024px) {
  body.page-sobre .about-hero {
    padding: 172px 0 104px;
  }
}

body.page-sobre .about-hero-inner {
  max-width: 880px;
}
body.page-sobre .about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 24px;
}
body.page-sobre .about-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7da9b5;
}

body.page-sobre .about-hero h1 {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 20px;
}
body.page-sobre .about-hero h1 strong {
  font-weight: 500;
}
body.page-sobre .about-hero-lede {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 720px;
}

/* Tags de pilares no hero */
body.page-sobre .about-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
body.page-sobre .about-pillar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 100px;
  background: rgba(125, 169, 181, 0.12);
  border: 1px solid rgba(125, 169, 181, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 400;
}
body.page-sobre .about-pillar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7da9b5;
}

/* ============================================================ PROPÓSITO ============================================================ */
body.page-sobre .about-purpose {
  padding: 80px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media (min-width: 1024px) {
  body.page-sobre .about-purpose {
    padding: 112px 0;
  }
}

body.page-sobre .about-purpose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) {
  body.page-sobre .about-purpose-grid {
    grid-template-columns: 340px 1fr;
    gap: 80px;
    align-items: start;
  }
}

body.page-sobre .about-section-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin-bottom: 14px;
}
body.page-sobre .about-purpose-label h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
}
body.page-sobre .about-purpose-label h2 strong {
  font-weight: 500;
}

body.page-sobre .about-purpose-body {
  font-family: "Lufga", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}
body.page-sobre .about-purpose-body p {
  margin: 0 0 20px;
}
body.page-sobre .about-purpose-body p:last-child {
  margin-bottom: 0;
}
body.page-sobre .about-purpose-body strong {
  color: #ffffff;
  font-weight: 500;
}

/* Destaques de stats */
body.page-sobre .about-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) {
  body.page-sobre .about-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

body.page-sobre .about-stat {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.008);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
body.page-sobre .about-stat-number {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 8px;
}
body.page-sobre .about-stat-number strong {
  font-weight: 500;
  color: #7da9b5;
}
body.page-sobre .about-stat-label {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ============================================================ ABORDAGENS (5 cards) ============================================================ */
body.page-sobre .about-approaches {
  padding: 80px 0;
}
@media (min-width: 1024px) {
  body.page-sobre .about-approaches {
    padding: 112px 0;
  }
}

body.page-sobre .about-approaches-head {
  text-align: left;
  margin-bottom: 48px;
  max-width: 720px;
}
body.page-sobre .about-approaches-head h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 14px;
}
body.page-sobre .about-approaches-head h2 strong {
  font-weight: 500;
}
body.page-sobre .about-approaches-head p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  margin: 0;
}

body.page-sobre .about-approaches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  body.page-sobre .about-approaches-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  body.page-sobre .about-approaches-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  /* Primeiro card ocupa 2 colunas (destaque maior) */
  body.page-sobre .about-approaches-grid .approach-card:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}

body.page-sobre .approach-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.008);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms,
    background-color 200ms;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
body.page-sobre .approach-card:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 169, 181, 0.55);
  background: rgba(255, 255, 255, 0.04);
}
body.page-sobre .approach-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(125, 169, 181, 0.15);
  border: 1px solid rgba(125, 169, 181, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7da9b5;
  font-size: 20px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
body.page-sobre .approach-card-kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(125, 169, 181, 0.9);
  font-weight: 500;
  margin-bottom: 10px;
}
body.page-sobre .approach-card h3 {
  font-family: "Lufga", sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 12px;
}
body.page-sobre .approach-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 24px;
  flex: 1;
}
body.page-sobre .approach-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
  transition: color 200ms, gap 200ms;
}
body.page-sobre .approach-card:hover .approach-card-link {
  color: #7da9b5;
  gap: 12px;
}

/* Primeiro card em destaque — layout diferente em desktop */
@media (min-width: 1024px) {
  body.page-sobre .about-approaches-grid .approach-card:first-child {
    background: #254858;
    border-color: rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
  }
  body.page-sobre .about-approaches-grid .approach-card:first-child::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 60%;
    height: 140%;
    background: radial-gradient(
      circle,
      rgba(125, 169, 181, 0.22),
      transparent 60%
    );
    pointer-events: none;
  }
  body.page-sobre .about-approaches-grid .approach-card:first-child > * {
    position: relative;
    z-index: 1;
  }
  body.page-sobre
    .about-approaches-grid
    .approach-card:first-child
    .approach-card-icon {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }
  body.page-sobre .about-approaches-grid .approach-card:first-child h3 {
    font-size: 1.625rem;
  }
  body.page-sobre .about-approaches-grid .approach-card:first-child p {
    font-size: 15px;
  }
}

/* ============================================================ NIE CALLOUT ============================================================ */
body.page-sobre .about-nie {
  padding: 80px 0;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 1024px) {
  body.page-sobre .about-nie {
    padding: 112px 0;
  }
}

body.page-sobre .about-nie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  body.page-sobre .about-nie-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

body.page-sobre .about-nie-label h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px;
}
body.page-sobre .about-nie-label h2 strong {
  font-weight: 500;
}
body.page-sobre .about-nie-label p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 28px;
}

body.page-sobre .about-nie-visual {
  position: relative;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(
      ellipse at 30% 30%,
      rgba(125, 169, 181, 0.35),
      transparent 55%
    ),
    radial-gradient(ellipse at 75% 75%, rgba(37, 72, 88, 0.7), transparent 60%),
    #254858;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.page-sobre .about-nie-visual-sigla {
  font-family: "Lufga", sans-serif;
  font-weight: 200;
  font-size: clamp(5rem, 12vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #ffffff;
}
body.page-sobre .about-nie-visual-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}

/* ============================================================ CTA FINAL ============================================================ */
body.page-sobre .about-cta {
  padding: 72px 0 96px;
}
body.page-sobre .about-cta-card {
  padding: 48px 32px;
  border-radius: 16px;
  background: #254858;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  body.page-sobre .about-cta-card {
    padding: 64px 48px;
  }
}
body.page-sobre .about-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 20% 20%,
      rgba(125, 169, 181, 0.28),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(181, 212, 222, 0.15),
      transparent 55%
    );
  pointer-events: none;
}
body.page-sobre .about-cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
body.page-sobre .about-cta-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 14px;
  font-weight: 300;
}
body.page-sobre .about-cta-card h2 {
  font-family: "Lufga", sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 16px;
}
body.page-sobre .about-cta-card h2 strong {
  font-weight: 500;
}
body.page-sobre .about-cta-card p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin: 0 0 32px;
}
body.page-sobre .about-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   6. UTILITIES BRIDGE — classes que faltam no Bootstrap 5 padrão
   mas são usadas pelo HTML (heranças Tailwind / custom do projeto)
   ============================================================ */

/* Spacing decimal (Tailwind permite 0.5, 1.5, 2.5) */
.py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.px-2\.5 {
  padding-right: 0.625rem !important;
  padding-left: 0.625rem !important;
}
.pt-0\.5 {
  padding-top: 0.125rem !important;
}
.mb-0\.5 {
  margin-bottom: 0.125rem !important;
}

/* Tamanhos pequenos (Tailwind w-1.5, h-1.5, w-2, h-2 = dots/bullets) */
.w-px {
  width: 1px !important;
}
.h-px {
  height: 1px !important;
}
.w-1 {
  width: 0.25rem !important;
}
.h-1 {
  height: 0.25rem !important;
}
.w-1\.5 {
  width: 0.375rem !important;
}
.h-1\.5 {
  height: 0.375rem !important;
}
.w-2 {
  width: 0.5rem !important;
}
.h-2 {
  height: 0.5rem !important;
}
.w-8 {
  width: 2rem !important;
}
.h-8 {
  height: 2rem !important;
}
.w-9 {
  width: 2.25rem !important;
}
.h-9 {
  height: 2.25rem !important;
}
.w-10 {
  width: 2.5rem !important;
}
.h-10 {
  height: 2.5rem !important;
}
.w-11 {
  width: 2.75rem !important;
}
.h-11 {
  height: 2.75rem !important;
}
.w-12 {
  width: 3rem !important;
}
.h-12 {
  height: 3rem !important;
}
.w-14 {
  width: 3.5rem !important;
}
.h-14 {
  height: 3.5rem !important;
}
.w-16 {
  width: 4rem !important;
}
.h-16 {
  height: 4rem !important;
}
.w-20 {
  width: 5rem !important;
}
.h-20 {
  height: 5rem !important;
}
.w-24 {
  width: 6rem !important;
}
.h-24 {
  height: 6rem !important;
}
.w-28 {
  width: 7rem !important;
}
.h-28 {
  height: 7rem !important;
}
.w-40 {
  width: 10rem !important;
}
.h-40 {
  height: 10rem !important;
}
.w-72 {
  width: 18rem !important;
}
.h-72 {
  height: 18rem !important;
}
.w-fit {
  width: fit-content !important;
}
.h-fit {
  height: fit-content !important;
}

/* W-auto responsivo (Tailwind sm:w-auto, md:w-auto, lg:w-auto) */
@media (min-width: 576px) {
  .w-sm-auto {
    width: auto !important;
  }
}
@media (min-width: 768px) {
  .w-md-auto {
    width: auto !important;
  }
}
@media (min-width: 992px) {
  .w-lg-auto {
    width: auto !important;
  }
}

/* Gaps maiores (Tailwind gap-10, gap-12, gap-16, gap-20) */
.g-6,
.gx-6 {
  --bs-gutter-x: 1.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 1.5rem;
}
.g-8,
.gx-8 {
  --bs-gutter-x: 2rem;
}
.g-8,
.gy-8 {
  --bs-gutter-y: 2rem;
}
.g-10,
.gx-10 {
  --bs-gutter-x: 2.5rem;
}
.g-10,
.gy-10 {
  --bs-gutter-y: 2.5rem;
}
.g-12,
.gx-12 {
  --bs-gutter-x: 3rem;
}
.g-12,
.gy-12 {
  --bs-gutter-y: 3rem;
}
.g-16,
.gx-16 {
  --bs-gutter-x: 4rem;
}
.g-16,
.gy-16 {
  --bs-gutter-y: 4rem;
}

/* Gap responsivos para containers flex/grid (Tailwind lg:gap-16, md:gap-6, etc) */
@media (min-width: 768px) {
  .md\:gap-16 {
    gap: 4rem !important;
  }
  .md\:gap-x-20 {
    column-gap: 5rem !important;
  }
  .md\:gap-y-14 {
    row-gap: 3.5rem !important;
  }
}
@media (min-width: 992px) {
  .lg\:gap-16 {
    gap: 4rem !important;
  }
  .lg\:gap-y-16 {
    row-gap: 4rem !important;
  }
}

/* Z-index grandes usados (z-90, z-100 aparecem no projeto) */
.z-40 {
  z-index: 40 !important;
}
.z-50 {
  z-index: 50 !important;
}
.z-90 {
  z-index: 90 !important;
}
.z-100 {
  z-index: 100 !important;
}

/* Object-fit/position (usado em <video> e <img> dentro de cards) */
.object-cover {
  object-fit: cover !important;
}
.object-contain {
  object-fit: contain !important;
}
.object-center {
  object-position: center !important;
}

/* Min-height responsivo md+ (foi usado no hero) */
@media (min-width: 768px) {
  .md\:min-h-screen {
    min-height: 100vh !important;
  }
}

/* Position responsivas (Tailwind lg:absolute, md:absolute etc) */
@media (min-width: 768px) {
  .position-md-absolute {
    position: absolute !important;
  }
  .position-md-relative {
    position: relative !important;
  }
  .position-md-static {
    position: static !important;
  }
}
@media (min-width: 992px) {
  .position-lg-absolute {
    position: absolute !important;
  }
  .position-lg-relative {
    position: relative !important;
  }
  .position-lg-static {
    position: static !important;
  }
}

/* Distâncias posicionais numéricas (Tailwind top-10, right-10, bottom-10, left-10) */
.top-10 {
  top: 2.5rem !important;
}
.right-10,
.end-10 {
  right: 2.5rem !important;
}
.bottom-10 {
  bottom: 2.5rem !important;
}
.left-10,
.start-10 {
  left: 2.5rem !important;
}
.top-4 {
  top: 1rem !important;
}
.right-4,
.end-4 {
  right: 1rem !important;
}
.bottom-4 {
  bottom: 1rem !important;
}
.left-4,
.start-4 {
  left: 1rem !important;
}

/* Inset-x-0 (Tailwind = left:0 + right:0) */
.inset-x-0 {
  left: 0 !important;
  right: 0 !important;
}
.inset-y-0 {
  top: 0 !important;
  bottom: 0 !important;
}

/* Max-widths Tailwind (max-w-5xl, max-w-6xl, max-w-7xl) */
.max-w-xs {
  max-width: 20rem !important;
}
.max-w-sm {
  max-width: 24rem !important;
}
.max-w-md {
  max-width: 28rem !important;
}
.max-w-lg {
  max-width: 32rem !important;
}
.max-w-xl {
  max-width: 36rem !important;
}
.max-w-2xl {
  max-width: 42rem !important;
}
.max-w-3xl {
  max-width: 48rem !important;
}
.max-w-4xl {
  max-width: 56rem !important;
}
.max-w-5xl {
  max-width: 64rem !important;
}
.max-w-6xl {
  max-width: 72rem !important;
}
.max-w-7xl {
  max-width: 80rem !important;
}

/* Space-y (Tailwind) — espaçamento vertical entre filhos */
.space-y-2 > * + * {
  margin-top: 0.5rem !important;
}
.space-y-3 > * + * {
  margin-top: 0.75rem !important;
}
.space-y-4 > * + * {
  margin-top: 1rem !important;
}
.space-y-5 > * + * {
  margin-top: 1.25rem !important;
}
.space-y-6 > * + * {
  margin-top: 1.5rem !important;
}
.space-y-8 > * + * {
  margin-top: 2rem !important;
}
@media (min-width: 768px) {
  .md\:space-y-8 > * + * {
    margin-top: 2rem !important;
  }
}

/* Scale (Tailwind scale-105) */
.scale-105 {
  transform: scale(1.05) !important;
}

/* Responsivos variados usados no projeto */
@media (min-width: 768px) {
  .md\:mb-14 {
    margin-bottom: 3.5rem !important;
  }
  .md\:mb-12 {
    margin-bottom: 3rem !important;
  }
  .md\:mb-8 {
    margin-bottom: 2rem !important;
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem !important;
  }
  .md\:mt-0 {
    margin-top: 0 !important;
  }
  .md\:pr-16 {
    padding-right: 4rem !important;
  }
  .md\:pl-16 {
    padding-left: 4rem !important;
  }
  .md\:pl-6 {
    padding-left: 1.5rem !important;
  }
  .md\:gap-12 {
    gap: 3rem !important;
  }
  .md\:gap-5 {
    gap: 1.25rem !important;
  }
  .md\:w-12 {
    width: 3rem !important;
  }
  .md\:h-12 {
    height: 3rem !important;
  }
}
@media (min-width: 992px) {
  .lg\:mt-0 {
    margin-top: 0 !important;
  }
  .lg\:pr-10 {
    padding-right: 2.5rem !important;
  }
  .lg\:pr-16 {
    padding-right: 4rem !important;
  }
  .lg\:pl-10 {
    padding-left: 2.5rem !important;
  }
  .lg\:pl-16 {
    padding-left: 4rem !important;
  }
  .lg\:gap-0 {
    gap: 0 !important;
  }
  .lg\:gap-20 {
    gap: 5rem !important;
  }
  .lg\:border-l {
    border-left: 1px solid !important;
  }
  .lg\:border-neutral-200 {
    border-color: rgb(229 229 229) !important;
  }
  .lg\:max-w-none {
    max-width: none !important;
  }
  .lg\:max-h-\[min\(600px\,75vh\)\] {
    max-height: min(600px, 75vh) !important;
  }
}
@media (min-width: 1200px) {
  .xl\:pr-16 {
    padding-right: 4rem !important;
  }
  .xl\:pl-16 {
    padding-left: 4rem !important;
  }
  .xl\:gap-20 {
    gap: 5rem !important;
  }
}

/* Min-heights arbitrários Tailwind (min-h-[48px], min-h-[56px] etc) */
.min-h-\[48px\] {
  min-height: 48px !important;
}
.min-h-\[56px\] {
  min-height: 56px !important;
}
.min-h-\[44px\] {
  min-height: 44px !important;
}
.min-h-\[40px\] {
  min-height: 40px !important;
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem !important;
}
.min-h-\[min\(360px\,52vh\)\] {
  min-height: min(360px, 52vh) !important;
}

/* Max-heights arbitrários */
.max-h-\[min\(520px\,65vh\)\] {
  max-height: min(520px, 65vh) !important;
}
.max-h-\[min\(600px\,75vh\)\] {
  max-height: min(600px, 75vh) !important;
}

/* Altura fixa */
.h-\[500px\] {
  height: 500px !important;
}
.h-\[400px\] {
  height: 400px !important;
}
.h-20 {
  height: 5rem !important;
}

/* Heights responsivos */
@media (min-width: 768px) {
  .md\:h-24 {
    height: 6rem !important;
  }
  .md\:h-\[2rem\] {
    height: 2rem !important;
  }
  .md\:text-\[2rem\] {
    font-size: 2rem !important;
  }
  .md\:text-\[2\.75rem\] {
    font-size: 2.75rem !important;
  }
  .md\:text-\[15px\] {
    font-size: 15px !important;
  }
  .md\:text-\[25px\] {
    font-size: 25px !important;
  }
  .md\:text-2xl {
    font-size: 1.5rem !important;
  }
  .md\:px-8 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
  .md\:px-12 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .md\:rounded-\[52px\] {
    border-radius: 52px !important;
  }
}
@media (min-width: 992px) {
  .lg\:text-\[2\.25rem\] {
    font-size: 2.25rem !important;
  }
  .lg\:p-28 {
    padding: 7rem !important;
  }
  .lg\:p-32 {
    padding: 8rem !important;
  }
}
@media (min-width: 1200px) {
  .xl\:text-\[2\.5rem\] {
    font-size: 2.5rem !important;
  }
  .xl\:p-\[7\.5rem\] {
    padding: 7.5rem !important;
  }
  .xl\:p-36 {
    padding: 9rem !important;
  }
  .xl\:pt-36 {
    padding-top: 9rem !important;
  }
  .xl\:pb-48 {
    padding-bottom: 12rem !important;
  }
  .xl\:py-28 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
}

/* Border radii arbitrários */
.rounded-\[25px\] {
  border-radius: 25px !important;
}
.rounded-\[28px\] {
  border-radius: 28px !important;
}
.rounded-\[40px\] {
  border-radius: 40px !important;
}
.rounded-\[52px\] {
  border-radius: 52px !important;
}

/* Max-widths arbitrários */
.max-w-\[1280px\] {
  max-width: 1280px !important;
}
.max-w-\[1400px\] {
  max-width: 1400px !important;
}
.max-w-\[1520px\] {
  max-width: 1520px !important;
}
.max-w-\[52ch\] {
  max-width: 52ch !important;
}
.max-w-\[min\(100\%\,1520px\)\] {
  max-width: min(100%, 1520px) !important;
}

/* Text-[Npx] arbitrários usados */
.text-\[15px\] {
  font-size: 15px !important;
}
.text-\[25px\] {
  font-size: 25px !important;
}

/* Leading arbitrários */
.leading-\[1\.08\] {
  line-height: 1.08 !important;
}
.leading-\[1\.1\] {
  line-height: 1.1 !important;
}
.leading-\[1\.4\] {
  line-height: 1.4 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
.leading-relaxed {
  line-height: 1.625 !important;
}

/* Tracking arbitrários */
.tracking-\[0\] {
  letter-spacing: 0 !important;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em !important;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em !important;
}
.tracking-tight {
  letter-spacing: -0.025em !important;
}
.tracking-wide {
  letter-spacing: 0.025em !important;
}
.tracking-wider {
  letter-spacing: 0.05em !important;
}
.tracking-widest {
  letter-spacing: 0.1em !important;
}

/* Shadow Tailwind arbitrary */
.shadow-\[0_4px_40px_rgba\(0\,0\,0\,0\.06\)\] {
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06) !important;
}
.shadow-\[0_24px_80px_rgba\(0\,0\,0\,0\.18\)\] {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
}

/* Z arbitrary */
.z-\[1\] {
  z-index: 1 !important;
}
.z-\[2\] {
  z-index: 2 !important;
}

/* Border-l / border-r / border-t / border-b base (Tailwind) */
.border-l {
  border-left-width: 1px !important;
  border-left-style: solid !important;
}
.border-r {
  border-right-width: 1px !important;
  border-right-style: solid !important;
}
.border-t {
  border-top-width: 1px !important;
  border-top-style: solid !important;
}
.border-b {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}

/* Neutral colors (Tailwind) */
.text-neutral-100 {
  color: rgb(245, 245, 245) !important;
}
.text-neutral-200 {
  color: rgb(229, 229, 229) !important;
}
.text-neutral-300 {
  color: rgb(212, 212, 212) !important;
}
.text-neutral-400 {
  color: rgb(163, 163, 163) !important;
}
.text-neutral-500 {
  color: rgb(115, 115, 115) !important;
}
.text-neutral-600 {
  color: rgb(82, 82, 82) !important;
}
.text-neutral-700 {
  color: rgb(64, 64, 64) !important;
}
.text-neutral-800 {
  color: rgb(38, 38, 38) !important;
}
.text-neutral-900 {
  color: rgb(23, 23, 23) !important;
}
.bg-neutral-100 {
  background-color: rgb(245, 245, 245) !important;
}
.bg-neutral-200 {
  background-color: rgb(229, 229, 229) !important;
}
.bg-neutral-300 {
  background-color: rgb(212, 212, 212) !important;
}
.bg-neutral-700 {
  background-color: rgb(64, 64, 64) !important;
}
.bg-neutral-800 {
  background-color: rgb(38, 38, 38) !important;
}
.bg-neutral-900 {
  background-color: rgb(23, 23, 23) !important;
}
.border-neutral-200 {
  border-color: rgb(229, 229, 229) !important;
}
.border-neutral-300 {
  border-color: rgb(212, 212, 212) !important;
}
.border-neutral-400 {
  border-color: rgb(163, 163, 163) !important;
}

/* Alphas em bordas */
.border-neutral-300\/80 {
  border-color: rgb(212 212 212 / 0.8) !important;
}
.border-neutral-200\/80 {
  border-color: rgb(229 229 229 / 0.8) !important;
}

/* Text-white com alpha (Tailwind text-white/75, text-white/85 etc) */
.text-white\/50 {
  color: rgb(255 255 255 / 0.5) !important;
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7) !important;
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75) !important;
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8) !important;
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85) !important;
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9) !important;
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05) !important;
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1) !important;
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2) !important;
}
.bg-black\/45 {
  background-color: rgb(0 0 0 / 0.45) !important;
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55) !important;
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2) !important;
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3) !important;
}
.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4) !important;
}

/* Backdrop blur */
.backdrop-blur-md {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.backdrop-blur-lg {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Mais classes arbitrary usadas pelo projeto */
.text-\[11px\] {
  font-size: 11px !important;
}
.text-\[clamp\(3\.25rem\,8\.5vw\,6\.25rem\)\] {
  font-size: clamp(3.25rem, 8.5vw, 6.25rem) !important;
}
.z-\[100\] {
  z-index: 100 !important;
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7) !important;
}
.bg-\[\#000000\] {
  background-color: #000000 !important;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1) !important;
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15) !important;
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25) !important;
}
.w-\[min\(60vw\,100\%\)\] {
  width: min(60vw, 100%) !important;
}

/* Hovers (Tailwind hover:*) */
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1) !important;
}
.hover\:bg-neutral-100\/80:hover {
  background-color: rgb(245 245 245 / 0.8) !important;
}
.hover\:bg-neutral-300:hover {
  background-color: rgb(212 212 212) !important;
}
.hover\:opacity-80:hover {
  opacity: 0.8 !important;
}
.hover\:text-neutral-300:hover {
  color: rgb(212 212 212) !important;
}

/* Focus rings */
.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--ring-color, rgba(255, 255, 255, 0.25)) !important;
}
.focus\:ring-white\/25:focus {
  --ring-color: rgb(255 255 255 / 0.25);
}
.focus\:ring-white\/30:focus {
  --ring-color: rgb(255 255 255 / 0.3);
}

/* Gradient (Tailwind bg-gradient-to-b from-X via-Y to-Z) */
.bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-from, transparent),
    var(--gradient-via, transparent),
    var(--gradient-to, transparent)
  ) !important;
}
.bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    var(--gradient-from, transparent),
    var(--gradient-via, transparent),
    var(--gradient-to, transparent)
  ) !important;
}
.from-black\/55 {
  --gradient-from: rgb(0 0 0 / 0.55);
}
.from-black {
  --gradient-from: #000;
}
.via-black\/20 {
  --gradient-via: rgb(0 0 0 / 0.2);
}
.via-black\/60 {
  --gradient-via: rgb(0 0 0 / 0.6);
}
.to-transparent {
  --gradient-to: transparent;
}

/* Size 2xl padding */
@media (min-width: 1400px) {
  .\32xl\:p-36 {
    padding: 9rem !important;
  }
  .\32xl\:pb-52 {
    padding-bottom: 13rem !important;
  }
}

/* Transições */
.transition-colors {
  transition: color 0.2s, background-color 0.2s, border-color 0.2s !important;
}
.transition-opacity {
  transition: opacity 0.2s !important;
}
.transition-transform {
  transition: transform 0.2s !important;
}
.transition-all {
  transition: all 0.2s !important;
}
.transition {
  transition: all 0.15s ease-in-out !important;
}

/* Mais paddings responsivos */
@media (min-width: 576px) {
  .sm\:pt-18 {
    padding-top: 4.5rem !important;
  }
  .sm\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .sm\:pb-20 {
    padding-bottom: 5rem !important;
  }
  .sm\:pb-24 {
    padding-bottom: 6rem !important;
  }
  .sm\:pt-16 {
    padding-top: 4rem !important;
  }
  .sm\:px-8 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
  .sm\:p-10 {
    padding: 2.5rem !important;
  }
  .sm\:text-\[15px\] {
    font-size: 15px !important;
  }
  .sm\:text-4xl {
    font-size: 2.25rem !important;
  }
  .sm\:text-3xl {
    font-size: 1.875rem !important;
  }
  .sm\:text-lg {
    font-size: 1.125rem !important;
  }
  .sm\:text-5xl {
    font-size: 3rem !important;
  }
  .sm\:py-14 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .sm\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .sm\:px-12 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
}
@media (min-width: 768px) {
  .md\:py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .md\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .md\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .md\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .md\:pb-28 {
    padding-bottom: 7rem !important;
  }
  .md\:pb-32 {
    padding-bottom: 8rem !important;
  }
  .md\:pb-40 {
    padding-bottom: 10rem !important;
  }
  .md\:pt-28 {
    padding-top: 7rem !important;
  }
  .md\:pt-20 {
    padding-top: 5rem !important;
  }
  .md\:p-24 {
    padding: 6rem !important;
  }
  .md\:p-28 {
    padding: 7rem !important;
  }
  .md\:text-4xl {
    font-size: 2.25rem !important;
  }
  .md\:text-3xl {
    font-size: 1.875rem !important;
  }
  .md\:text-5xl {
    font-size: 3rem !important;
  }
  .md\:text-lg {
    font-size: 1.125rem !important;
  }
  .md\:text-base {
    font-size: 1rem !important;
  }
  .md\:text-sm {
    font-size: 0.875rem !important;
  }
}
@media (min-width: 992px) {
  .lg\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .lg\:py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .lg\:pb-44 {
    padding-bottom: 11rem !important;
  }
  .lg\:pt-32 {
    padding-top: 8rem !important;
  }
  .lg\:pt-36 {
    padding-top: 9rem !important;
  }
}
@media (min-width: 1200px) {
  .xl\:py-28 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .xl\:pt-36 {
    padding-top: 9rem !important;
  }
  .xl\:pb-44 {
    padding-bottom: 11rem !important;
  }
  .xl\:pb-48 {
    padding-bottom: 12rem !important;
  }
  .xl\:pb-52 {
    padding-bottom: 13rem !important;
  }
}

/* Tamanhos responsivos text */
@media (min-width: 576px) {
  .sm\:py-18 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}

/* Block display variants e flex para responsivos importantes ainda não cobertos */
@media (min-width: 992px) {
  .d-lg-grid {
    display: grid !important;
  }
}

/* ============================================================
   PATCH ESPECÍFICO: gradiente Tailwind-style
   ============================================================ */
/* Quando .bg-gradient-to-b aparece junto com from/via/to, usar
   background-image direto. O método acima com vars pode não funcionar
   bem em todos casos, então sobrescreve para a combinação comum. */
.bg-gradient-to-b.from-black\/55.via-black\/20.to-transparent {
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.55),
    rgb(0 0 0 / 0.2),
    transparent
  ) !important;
}
.bg-gradient-to-b.from-black.via-black\/60.to-transparent {
  background-image: linear-gradient(
    to bottom,
    #000,
    rgb(0 0 0 / 0.6),
    transparent
  ) !important;
}
.bg-gradient-to-t.from-black.via-black\/60.to-transparent {
  background-image: linear-gradient(
    to top,
    #000,
    rgb(0 0 0 / 0.6),
    transparent
  ) !important;
}

/* PATCH FINAL: classes 2xl e bg-[#hex] ainda não cobertas */
@media (min-width: 1536px) {
  .\32xl\:p-36 {
    padding: 9rem !important;
  }
  .\32xl\:pb-52 {
    padding-bottom: 13rem !important;
  }
}
.bg-\[\#000000\] {
  background-color: #000000 !important;
}

/* ============================================================
   CSS ESPECÍFICO — post-agenda-de-pessoas-2026-v3.html
   (Antes estava dentro do <style> da página)
   ============================================================ */

/* Substitui estilos inline removidos do HTML */
body.page-blog-post .post-hero.post-hero--featured {
  --post-hero-image: url("blgo.png");
}
body.page-blog-post .post-grid {
  padding-top: 48px;
}
body.page-blog-post .post-share-btn {
  height: 38px;
  font-size: 13px;
}
body.page-blog-post .post-related-slider {
  --evm-slider-cols: 3;
  margin-top: 32px;
}
footer.evm-footer-home {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
footer .evm-footer-tagline {
  font-family: var(--font-lufga);
  font-weight: 300;
}

/* Footer (post): aplicar os mesmos espaçamentos da home */
body.page-blog-post footer.evm-footer-home .evm-footer-main {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
body.page-blog-post footer.evm-footer-home .evm-footer-legal {
  font-size: 11px;
}

/* Footer fora do tema claro/escuro: sempre “dark” */
body.page-blog-post footer.evm-footer-home {
  background: #000000 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
body.page-blog-post footer.evm-footer-home .text-white {
  color: #ffffff !important;
}
body.page-blog-post footer.evm-footer-home .text-neutral-300 {
  color: rgba(255, 255, 255, 0.78) !important;
}
body.page-blog-post footer.evm-footer-home .text-neutral-400,
body.page-blog-post footer.evm-footer-home .text-neutral-500,
body.page-blog-post footer.evm-footer-home .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}
body.page-blog-post footer.evm-footer-home a {
  color: inherit !important;
}
body.page-blog-post footer.evm-footer-home a:hover {
  color: #ffffff !important;
}

/* Botão de tema: garantir contraste em qualquer estado (evita branco+branco) */
body.page-blog-post
  header#header
  [data-reading-theme-toggle].btn-outline-light.reading-theme-fab {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
body.page-blog-post
  header#header
  [data-reading-theme-toggle].btn-outline-light.reading-theme-fab:hover,
body.page-blog-post
  header#header
  [data-reading-theme-toggle].btn-outline-light.reading-theme-fab:active,
body.page-blog-post
  header#header
  [data-reading-theme-toggle].btn-outline-light.reading-theme-fab.active,
body.page-blog-post
  header#header
  [data-reading-theme-toggle].btn-outline-light.reading-theme-fab:focus,
body.page-blog-post
  header#header
  [data-reading-theme-toggle].btn-outline-light.reading-theme-fab:focus-visible {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Variante local deste post: hero com imagem mais destacada (referência visual) */
body.page-blog-post .post-hero.post-hero--featured {
  padding: 165px 0 53px;
  min-height: 73vh;
  display: grid;
  align-items: end;
}
/* Layout estilo “artigo com imagem dominante” (como a referência) */
body.page-blog-post .post-hero.post-hero--featured::after {
  /* “Fade” só no final (parte de baixo) da imagem, como a referência */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 65%,
    rgba(0, 0, 0, 0.32) 84%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
body.page-blog-post .post-hero.post-hero--featured::before {
  /* Ajuste de “foco” para a nova imagem */
  inset: -6%;
  background-position: center 35%;
  transform: scale(1.04);
  filter: none;
}
body.page-blog-post .post-hero.post-hero--featured .post-hero-inner {
  max-width: 1280px;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  body.page-blog-post .post-hero.post-hero--featured .post-hero-inner {
    /* alinha com a coluna do conteúdo (após o TOC) */
    max-width: none;
    width: 100%;
    margin: 0;
    padding-left: calc(48px + 260px + 72px);
    padding-right: 48px;
  }
}
body.page-blog-post .post-hero.post-hero--featured .post-title {
  max-width: 860px;
  margin: 0 0 18px;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.15rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1024px) {
  body.page-blog-post .post-hero.post-hero--featured .post-title {
    max-width: 940px;
  }
}
body.page-blog-post .post-hero.post-hero--featured .post-title strong {
  font-weight: 500;
}
body.page-blog-post .post-hero.post-hero--featured .post-hero-submeta {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  body.page-blog-post .post-hero.post-hero--featured {
    padding: 209px 0 70px;
    min-height: 79vh;
  }
}
@media (min-width: 1024px) {
  body.page-blog-post .post-hero.post-hero--featured {
    padding: 242px 0 88px;
    min-height: 84vh;
  }
}

/* Header: fundo preto mais intenso com degradê vertical */
body.page-blog-post .evm-hero-header {
  position: relative;
  z-index: 20;
  background: transparent;
}
body.page-blog-post .evm-hero-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 156px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}
body.page-blog-post .evm-hero-header > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  body.page-blog-post .evm-hero-header::before {
    height: 176px;
  }
}
@media (min-width: 1024px) {
  body.page-blog-post .evm-hero-header::before {
    height: 196px;
  }
}

/* Modo claro: manter menu/ações no padrão da HOME (branco/outlined) */
body.page-blog-post[data-reading-theme="light"] header#header .evm-nav-link {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
}
body.page-blog-post[data-reading-theme="light"]
  header#header
  .evm-nav-link:hover,
body.page-blog-post[data-reading-theme="light"]
  header#header
  .evm-nav-item.is-open
  .evm-nav-link {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}
body.page-blog-post[data-reading-theme="light"]
  header#header
  .evm-header-login {
  color: #ffffff !important;
}
body.page-blog-post[data-reading-theme="light"]
  header#header
  .btn-evermonte-outline,
body.page-blog-post[data-reading-theme="light"]
  header#header
  [data-reading-theme-toggle].btn-outline-light,
body.page-blog-post[data-reading-theme="light"] header#header .evm-hamburger {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
}
body.page-blog-post[data-reading-theme="light"]
  header#header
  .btn-evermonte-outline:hover,
body.page-blog-post[data-reading-theme="light"]
  header#header
  [data-reading-theme-toggle].btn-outline-light:hover,
body.page-blog-post[data-reading-theme="light"]
  header#header
  .evm-hamburger:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}
body.page-blog-post[data-reading-theme="light"] header#header .evm-tagline {
  color: rgba(255, 255, 255, 0.78) !important;
}
body.page-blog-post[data-reading-theme="light"]
  header#header
  .evm-hamburger-line {
  background: #ffffff !important;
}
body.page-blog-post[data-reading-theme="light"]
  header#header
  .evm-hamburger:hover
  .evm-hamburger-line {
  background: #000000 !important;
}

/* Corpo do post abrindo em branco (apenas abaixo do hero) — versão clara */
body.page-blog-post[data-reading-theme="light"] #page-content {
  background: #ffffff;
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-grid {
  padding-bottom: 64px;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-body,
body.page-blog-post[data-reading-theme="light"] #page-content .post-body p,
body.page-blog-post[data-reading-theme="light"] #page-content .post-body li {
  color: rgba(17, 17, 17, 0.86);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-body
  p
  strong {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-body p em {
  color: rgba(17, 17, 17, 0.86);
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-body h2,
body.page-blog-post[data-reading-theme="light"] #page-content .post-body h3 {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-body .lede {
  color: rgba(17, 17, 17, 0.9);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-body
  a:not(.btn-evermonte) {
  color: #111111;
  text-decoration-color: rgba(17, 17, 17, 0.35);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-body
  a:not(.btn-evermonte):hover {
  color: #000000;
  text-decoration-color: rgba(0, 0, 0, 0.6);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-body
  blockquote {
  border-left-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.03);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-body
  blockquote
  p {
  color: rgba(17, 17, 17, 0.78);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-body
  blockquote
  footer {
  color: rgba(17, 17, 17, 0.55);
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-highlight {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-highlight-text {
  color: rgba(17, 17, 17, 0.78);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-toc
  .post-toc-inner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-toc-title {
  color: rgba(17, 17, 17, 0.75);
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-toc a {
  color: rgba(17, 17, 17, 0.72);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-toc
  a:hover {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-toc
  a.is-active {
  color: #111111;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-related {
  background: #ffffff;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-related {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-related h2 {
  color: #111111 !important;
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related-kicker {
  color: rgba(17, 17, 17, 0.55) !important;
}
/* Corrige utilitários (text-white, etc.) que ficam ilegíveis no fundo branco */
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  .text-white,
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  .text-neutral-300,
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  .text-neutral-400 {
  color: #111111 !important;
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  .evm-slider-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  .evm-slider-card:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  a.text-sm {
  color: #111111 !important;
  text-decoration-color: rgba(17, 17, 17, 0.35);
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-related
  a.text-sm:hover {
  color: #000000 !important;
  text-decoration-color: rgba(0, 0, 0, 0.6);
}

/* Exceção: CTA azul deve continuar “dark” com texto branco (mesmo no tema claro) */
body.page-blog-post[data-reading-theme="light"] #page-content .post-cta,
body.page-blog-post[data-reading-theme="light"] #page-content .post-cta h3,
body.page-blog-post[data-reading-theme="light"] #page-content .post-cta p,
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-cta
  .post-cta-kicker {
  color: #ffffff !important;
}
body.page-blog-post[data-reading-theme="light"] #page-content .post-cta {
  background: #254858 !important;
}

/* Modo claro: manter imagem no hero (não deixar sumir) */
body.page-blog-post[data-reading-theme="light"]
  .post-hero.post-hero--featured::before {
  opacity: 1 !important;
  visibility: visible !important;
  animation: evmPostHeroKenBurns 30s ease-in-out infinite alternate;
}
body.page-blog-post[data-reading-theme="light"]
  .post-hero.post-hero--featured::after {
  /* mantém apenas o fade no final, como definido acima */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.92) 100%
  );
}
body.page-blog-post[data-reading-theme="light"]
  .post-hero.post-hero--featured
  .post-title,
body.page-blog-post[data-reading-theme="light"]
  .post-hero.post-hero--featured
  .post-hero-submeta {
  color: #ffffff !important;
}

/* TOC mais “bonito” e com estado ativo mais claro */
body.page-blog-post .post-toc .post-toc-inner {
  border-radius: 16px;
  padding: 18px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Manter o bloco do índice visível durante o scroll */
@media (min-width: 768px) {
  body.page-blog-post .post-toc {
    align-self: start;
    position: sticky;
    top: 96px;
    height: fit-content;
    z-index: 5;
  }
  body.page-blog-post .post-toc .post-toc-inner {
    position: static;
  }
}
@media (min-width: 1024px) {
  body.page-blog-post .post-toc {
    grid-row: 1 / -1;
  }
  body.page-blog-post .post-toc .post-toc-inner {
    padding: 18px 18px;
  }
}
body.page-blog-post .post-toc a {
  border-left-width: 3px;
  padding-left: 14px;
  margin-left: -14px;
}
body.page-blog-post .post-toc a.is-active {
  background: rgba(125, 169, 181, 0.12);
  border-radius: 10px;
  padding-right: 10px;
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-toc
  .post-toc-inner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-toc
  a.is-active {
  background: rgba(37, 72, 88, 0.08);
  border-left-color: #254858;
}
body.page-blog-post[data-reading-theme="light"]
  #page-content
  .post-toc
  a.is-active::before {
  color: #254858;
}

/* Botão de tema flutuante (canto inferior direito) */
body.page-blog-post .reading-theme-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-lufga);
  font-weight: 300;
}
@media (min-width: 768px) {
  body.page-blog-post .reading-theme-fab {
    right: 22px;
    bottom: 22px;
  }
}
/* Evita duplicar toggle no mobile (vamos usar só o flutuante) */
body.page-blog-post [data-reading-theme-toggle].reading-theme-mobile-toggle {
  display: none !important;
}

/* Rodapé sempre preto (inclusive no modo claro) */
body.page-blog-post > footer {
  background: #000000 !important;
  color: rgba(255, 255, 255, 0.78);
}
body.page-blog-post[data-reading-theme="light"] > footer {
  background: #000000 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
body.page-blog-post > footer a {
  color: rgba(255, 255, 255, 0.78);
}
body.page-blog-post[data-reading-theme="light"] > footer a {
  color: rgba(255, 255, 255, 0.78) !important;
}
body.page-blog-post > footer a:hover {
  color: #ffffff;
}
body.page-blog-post[data-reading-theme="light"] > footer a:hover {
  color: #ffffff !important;
}

/* ============================================================
   PATCH 2026-05-11 — .rounded-4 / .rounded-5 (Bootstrap 5.0.2
   local não tem essas classes; adicionadas no BS 5.2+).
   ============================================================ */
.rounded-4 { border-radius: .5rem !important; }
.rounded-5 { border-radius: 1rem !important; }

/* ============================================================
   PATCH 2026-05-15 — .evm-rich
   Resetar margens dos <p> que o Summernote envolve dentro de
   títulos/leads (service/detail hero) e similares.
   ============================================================ */
.evm-rich > p:first-child { margin-top: 0; }
.evm-rich > p:last-child  { margin-bottom: 0; }
.evm-rich p { margin: 0; }

/* ============================================================
   PATCH 2026-05-19 — Área restrita (vault)
   ============================================================ */

      /* ========== Área restrita — biblioteca ========== */
      body.page-vault {
        font-family: "Lufga", sans-serif;
      }

      body.page-vault .vault-header-user {
        font-size: 13px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.85);
      }

      body.page-vault .vault-list-hero-band {
        background-image: url("assets/img/background-interna.jpg");
        background-size: cover;
        background-position: center;
      }

      body.page-vault .vault-list-hero-band #header.evm-hero-header {
        background: transparent;
      }

      body.page-vault .vault-list-hero-band .blog-hero.vault-hero {
        background: none;
        background-image: none;
        padding: 24px 0 56px;
        border-bottom: 0;
      }

      @media (min-width: 768px) {
        body.page-vault .vault-list-hero-band .blog-hero.vault-hero {
          padding: 32px 0 72px;
        }
      }

      @media (min-width: 1024px) {
        body.page-vault .vault-list-hero-band .blog-hero.vault-hero {
          padding: 40px 0 88px;
        }
      }

      body.page-vault .vault-hero {
        padding-bottom: 0;
      }

      body.page-vault #page-content {
        --v-bg: #ffffff;
        --v-text: #000000;
        --v-muted: #666666;
        --v-soft: #999999;
        --v-border: #eeeeee;
        --v-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
        --v-shadow-hover: 0 10px 32px rgba(0, 0, 0, 0.1);
        background: var(--v-bg);
        color: var(--v-text);
        padding-bottom: 80px;
      }

      /* Barra horizontal de tipos — topo do conteúdo */
      .vault-types-bar {
        position: sticky;
        top: 0;
        z-index: 30;
        background: #fff;
        border-bottom: 1px solid var(--v-border);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
      }

      .vault-types {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 16px 0;
        margin: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .vault-types::-webkit-scrollbar {
        display: none;
      }

      .vault-type {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 18px;
        border: 1px solid var(--v-border);
        border-radius: 100px;
        background: #fff;
        color: var(--v-muted);
        font-size: 14px;
        font-family: inherit;
        font-weight: 400;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        white-space: nowrap;
      }

      .vault-type i {
        font-size: 13px;
        opacity: 0.75;
      }

      .vault-type:hover {
        border-color: #ccc;
        color: var(--v-text);
      }

      .vault-type.is-active {
        background: #000;
        border-color: #000;
        color: #fff;
      }

      .vault-type.is-active i {
        opacity: 1;
      }

      .vault-type-count {
        font-size: 11px;
        padding: 2px 7px;
        border-radius: 100px;
        background: rgba(0, 0, 0, 0.08);
        color: inherit;
      }

      .vault-type.is-active .vault-type-count {
        background: rgba(255, 255, 255, 0.2);
      }

      .vault-body {
        padding-top: 48px;
      }

      @media (min-width: 768px) {
        .vault-body {
          padding-top: 56px;
        }
      }

      .vault-results-meta {
        font-size: 13px;
        color: var(--v-soft);
        margin: 0 0 24px;
      }

      /* Grid de materiais com capa */
      .vault-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }

      @media (min-width: 640px) {
        .vault-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 1024px) {
        .vault-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (min-width: 1280px) {
        .vault-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .vault-card {
        margin: 0;
      }

      .vault-card-link {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--v-border);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--v-shadow);
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
      }

      a.vault-card-link:hover {
        transform: translateY(-4px);
        box-shadow: var(--v-shadow-hover);
        border-color: #ddd;
      }

      .vault-card--locked .vault-card-link {
        cursor: default;
        opacity: 0.88;
      }

      .vault-card--locked a.vault-card-link:hover {
        transform: none;
      }

      /* Capa estilo relatório PDF */
      .vault-card-cover {
        position: relative;
        margin: 0;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: #1a2a32;
      }

      .vault-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
        transition: transform 0.4s ease;
      }

      a.vault-card-link:hover .vault-card-cover img {
        transform: scale(1.03);
      }

      .vault-card-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 40%,
          rgba(0, 0, 0, 0.35) 100%
        );
        pointer-events: none;
      }

      .vault-cover-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        padding: 4px 10px;
        border-radius: 100px;
        background: rgba(0, 0, 0, 0.82);
        color: #fff;
        font-size: 9px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 500;
      }

      .vault-cover-badge--live {
        background: #c53030;
      }

      .vault-cover-format {
        position: absolute;
        bottom: 12px;
        right: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.95);
        color: #000;
        font-size: 11px;
        font-weight: 500;
      }

      .vault-card-body {
        padding: 18px 20px 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .vault-card-meta {
        font-size: 11px;
        color: var(--v-soft);
        margin: 0;
        font-weight: 300;
      }

      .vault-card-title {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.3;
        margin: 0;
        color: var(--v-text);
      }

      .vault-card-desc {
        font-size: 13px;
        line-height: 1.5;
        color: var(--v-muted);
        margin: 0;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .vault-card-cta {
        font-size: 12px;
        color: #8b6914;
        font-weight: 500;
        margin-top: 4px;
      }

      .vault-empty {
        text-align: center;
        padding: 48px 24px;
        color: var(--v-muted);
        font-size: 15px;
      }

      .vault-card[hidden],
      .vault-empty[hidden] {
        display: none !important;
      }

/* ============================================================
   PATCH 2026-05-19 — #solutions sempre em carrossel (também no desktop)
   Antes: display grid no desktop -> 4º card quebrava em outra linha.
   Agora: flex horizontal com snap; 3 cards visíveis por vez no desktop,
          1 no mobile (já era 1). Dots ativados pelo evermonte-ds.js.
   ============================================================ */
@media (min-width: 992px) {
  body.page-index #solutions .solutions-track {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
  }
  body.page-index #solutions .solutions-track > .solutions-card {
    flex: 0 0 calc((100% - 3rem) / 3) !important;
    min-width: 0 !important;
    width: auto !important;
    scroll-snap-align: start;
  }
}
body.page-index #solutions .solutions-track::-webkit-scrollbar { display: none; }
body.page-index #solutions .solutions-track { scrollbar-width: none; }

/* ============================================================
   PATCH 2026-05-19 (v2) — Todos os sliders também carrosséis no desktop
   Sobrescreve a regra do @media (min-width: 1024px) que transformava
   .evm-slider-track em grid. Agora desktop também tem scroll-snap.
   ============================================================ */
@media (min-width: 1024px) {
  .evm-slider-track {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding: 4px 4px 12px;
    scrollbar-width: none;
  }
  .evm-slider-track::-webkit-scrollbar { display: none; }
  .evm-slider-track::before,
  .evm-slider-track::after {
    display: block !important;
    content: "";
    flex: 0 0 4px;
  }
  .evm-slider-card {
    flex: 0 0 calc((100% - 24px * (var(--evm-slider-cols, 3) - 1)) / var(--evm-slider-cols, 3)) !important;
    max-width: none;
    width: auto;
    scroll-snap-align: start;
  }
  .evm-slider-dots {
    display: flex !important;
  }
}

/* ============================================================
   PATCH 2026-05-19 (v3) — Forçar Nossas Soluções (solutions-track)
   sempre em carrossel, em qualquer viewport, sem wrap.
   ============================================================ */
body.page-index #solutions .solutions-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 24px;
  scrollbar-width: none;
}
body.page-index #solutions .solutions-track::-webkit-scrollbar { display: none; }
body.page-index #solutions .solutions-track > .solutions-card {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  scroll-snap-align: start;
}
@media (max-width: 991px) {
  body.page-index #solutions .solutions-track > .solutions-card {
    flex: 0 0 calc((100% - 24px) / 2) !important;
  }
}
@media (max-width: 640px) {
  body.page-index #solutions .solutions-track > .solutions-card {
    flex: 0 0 100% !important;
  }
}

/* ============================================================
   PATCH 2026-05-27 — Outras soluções (interna de service/category):
   o markup estático antigo (dots de placeholder + hrefs `index.html#…`)
   foi substituído pelo blade dinâmico; agora o carrossel é wireado via
   evermonte-ds.js (wireSliderDots + addArrows). As setas globais
   .evm-slider-arrow têm `display:none` por padrão e só aparecem com
   `.evm-slider.has-arrows` / `.evm-hero-slider.has-arrows` — como aqui
   o container é a própria <section id="other-solutions">, precisamos
   liberar o show explicitamente.
   ============================================================ */
#other-solutions.has-arrows .evm-slider-arrow { display: inline-flex; }

/* ============================================================
   PATCH 2026-05-27 — Nossas Soluções: padronizar altura dos cards
   pelo maior (alinhamento das bases).
   O .solutions-track já é flex com align-items:stretch (default),
   mas cada card tem o utilitário Bootstrap .h-100 (height:100% !important),
   que fixa uma altura explícita -> desativa o stretch e o 100% resolve
   contra a altura indefinida do track, caindo para a altura do próprio
   conteúdo (cards com bases desalinhadas).
   Solução: devolver height:auto ao card (vence .h-100 por especificidade)
   e reforçar o stretch -> todos crescem até a altura do maior card.
   O conteúdo continua alinhado no topo via .leading-relaxed { flex:1 1 auto }.
   ============================================================ */
body.page-index #solutions .solutions-track {
  align-items: stretch !important;
}
body.page-index #solutions .solutions-track > .solutions-card {
  height: auto !important;
  align-self: stretch !important;
}

/* ============================================================
   PATCH 2026-05-28 — Vídeos de fundo nas seções "Performance
   insight" (#performance-insight) e "Interdependências"
   (#interdependencias) da home.
   Estrutura: <section> position-relative + overflow-hidden,
   <video> absoluto cobrindo o fundo (sem captura de eventos),
   <div>s de fade/overlay garantindo legibilidade do copy.
   Escopado em body.page-index pra não vazar pra outras páginas
   caso os ids reapareçam.
   ============================================================ */

/* --- Bloco 1: Performance insight --- */
body.page-index #performance-insight.performance-video-section {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}
body.page-index #performance-insight .performance-bg-video {
  position: absolute;
  right: 0;
  top: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
body.page-index #performance-insight .performance-fade-top,
body.page-index #performance-insight .performance-fade-bottom,
body.page-index #performance-insight .performance-fade-left {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
body.page-index #performance-insight .performance-fade-top {
  top: 0;
  left: 0;
  right: 0;
  height: 380px;
  background: linear-gradient(to bottom, #000 0%, #000 10%, transparent 100%);
}
body.page-index #performance-insight .performance-fade-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 380px;
  background: linear-gradient(to top, #000 0%, #000 10%, transparent 100%);
}
body.page-index #performance-insight .performance-fade-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 65%;
  background: linear-gradient(to right, #000 0%, #000 20%, transparent 100%);
}
body.page-index #performance-insight .container {
  position: relative;
  z-index: 3;
}
body.page-index #performance-insight .evm-h2,
body.page-index #performance-insight .text-neutral-300 {
  color: #fff !important;
}
@media (max-width: 768px) {
  body.page-index #performance-insight .performance-bg-video {
    width: 100%;
    opacity: 0.85;
  }
  body.page-index #performance-insight .performance-fade-top,
  body.page-index #performance-insight .performance-fade-bottom {
    height: 160px; /* menor no mobile pra não engolir o vídeo */
  }
  body.page-index #performance-insight .performance-fade-left {
    display: none;
  }
  body.page-index #performance-insight .evm-h2,
  body.page-index #performance-insight .text-neutral-300 {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
  }
}

/* --- Bloco 2: Interdependências (2026-05-29: layout invertido)
   Vídeo agora é elemento normal no grid (esquerda) + texto à direita.
   Antes era vídeo de fundo cobrindo tudo com texto sobreposto. --- */
body.page-index #interdependencias.interdep-video-section {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: #000;
}
body.page-index #interdependencias .interdep-fade-top,
body.page-index #interdependencias .interdep-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 2;
}
body.page-index #interdependencias .interdep-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
}
body.page-index #interdependencias .interdep-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #000 0%, transparent 100%);
}
body.page-index #interdependencias .container {
  position: relative;
  z-index: 3;
  width: 100%;
}
body.page-index #interdependencias .interdep-grid {
  display: grid;
  /* 2026-07-29 (Andreia): distribuição mais equilibrada, espelhando o bloco
     #interdependencias-2 (texto ~55% / vídeo ~45%). Vídeo à esquerda, texto à direita. */
  grid-template-columns: 1fr 1.22fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
}
body.page-index #interdependencias .interdep-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 2026-07-29: texto alinhado à ESQUERDA, igual ao 1º bloco (#interdependencias-2).
     A distribuição equilibrada vem da proporção das colunas do .interdep-grid. */
  text-align: left;
}
body.page-index #interdependencias .interdep-video-wrapper {
  display: flex;
  align-items: center;
  /* Alinha o vídeo à direita da sua coluna — fica colado no texto. */
  justify-content: flex-end;
}
body.page-index #interdependencias .interdep-video {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  display: block;
}
body.page-index #interdependencias .evm-h2,
body.page-index #interdependencias .text-neutral-300 {
  color: #fff !important;
}
@media (max-width: 768px) {
  body.page-index #interdependencias .interdep-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* No mobile: vídeo aparece acima do texto (não empurra o copy pra baixo do scroll). */
  body.page-index #interdependencias .interdep-video-wrapper {
    order: -1;
  }
}

/* --- Nova seção: Núcleo de Inteligência da Evermonte (Maickel 2026-07-22) ---
   Vídeo à esquerda + texto à direita, acima de "Nossas Soluções".
   Reaproveita classes .interdep-* mas TUDO escopado em #nucleo-inteligencia
   pra não afetar a seção #interdependencias existente. */
body.page-index #nucleo-inteligencia.interdep-video-section {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: #000;
}
body.page-index #nucleo-inteligencia .interdep-fade-top,
body.page-index #nucleo-inteligencia .interdep-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 2;
}
body.page-index #nucleo-inteligencia .interdep-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
}
body.page-index #nucleo-inteligencia .interdep-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #000 0%, transparent 100%);
}
body.page-index #nucleo-inteligencia .container {
  position: relative;
  z-index: 3;
  width: 100%;
}
body.page-index #nucleo-inteligencia .interdep-row {
  --bs-gutter-x: 5.5rem;
  align-items: center;
}
body.page-index #nucleo-inteligencia .interdep-video-wrapper {
  flex: 0 0 auto;
  width: 45%;
  display: flex;
  align-items: center;
}
body.page-index #nucleo-inteligencia .interdep-text {
  flex: 0 0 auto;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.page-index #nucleo-inteligencia .interdep-video {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  display: block;
}
body.page-index #nucleo-inteligencia .interdep-text h2 {
  font-weight: 500 !important;
}
body.page-index #nucleo-inteligencia .interdep-text h2 .evm-font-light {
  font-weight: 200 !important;
}
body.page-index #nucleo-inteligencia .interdep-text p {
  font-size: 25px !important;
  font-weight: 200 !important;
  line-height: 32px !important;
  color: #fff;
}
@media (max-width: 991px) {
  body.page-index #nucleo-inteligencia .interdep-video-wrapper,
  body.page-index #nucleo-inteligencia .interdep-text {
    width: 100%;
  }
  /* No mobile: vídeo acima do texto e texto alinhado à esquerda */
  body.page-index #nucleo-inteligencia .interdep-video-wrapper {
    order: -1;
  }
  body.page-index #nucleo-inteligencia .interdep-text {
    text-align: left !important;
  }
  body.page-index #nucleo-inteligencia .interdep-text p {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}

/* --- "Sua organização talvez não tem um problema de performance" (Maickel 2026-07-22) ---
   Substitui o antigo #performance-insight (era vídeo de fundo). Texto à esq + vídeo à dir.
   Classes .interdep-*-2 (sufixo, sem colisão) + base do video-section/fades escopada aqui
   (as regras base .interdep-* originais são id-scoped em #interdependencias, não herdam). */
body.page-index #interdependencias-2.interdep-video-section {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: #000;
}
body.page-index #interdependencias-2 .interdep-fade-top,
body.page-index #interdependencias-2 .interdep-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 2;
}
body.page-index #interdependencias-2 .interdep-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
}
body.page-index #interdependencias-2 .interdep-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #000 0%, transparent 100%);
}
body.page-index #interdependencias-2 .container {
  position: relative;
  z-index: 3;
  width: 100%;
}
body.page-index #interdependencias-2 .interdep-row-2 {
  --bs-gutter-x: 5.5rem;
  align-items: center;
}
body.page-index #interdependencias-2 .interdep-text-2 {
  flex: 0 0 auto;
  width: 55%;
}
body.page-index #interdependencias-2 .interdep-video-wrapper-2 {
  flex: 0 0 auto;
  width: 45%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
body.page-index #interdependencias-2 .interdep-video-wrapper-2 video {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}
body.page-index #interdependencias-2 .interdep-text-2 h2 {
  font-weight: 200 !important;
}
body.page-index #interdependencias-2 .interdep-text-2 h2 .evm-font-bold {
  font-weight: 500 !important;
}
body.page-index #interdependencias-2 .interdep-text-2 p {
  font-size: 25px !important;
  font-weight: 200 !important;
  line-height: 32px !important;
  color: #fff;
}
@media (max-width: 991px) {
  body.page-index #interdependencias-2 .interdep-text-2,
  body.page-index #interdependencias-2 .interdep-video-wrapper-2 {
    width: 100%;
  }
  /* No mobile: vídeo acima do texto */
  body.page-index #interdependencias-2 .interdep-video-wrapper-2 {
    order: -1;
  }
  body.page-index #interdependencias-2 .interdep-text-2 p {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}

/* ============================================================
   MARQUEE — carrossel contínuo, infinito, sem bordas visíveis.
   Aplicado em qualquer slider com [data-marquee].
   JS (evermonte-ds.js / initMarquees) duplica os cards uma vez
   pra que `translateX(-50%)` resulte num loop perfeito.
   ============================================================ */
.evm-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}
/* Fade lateral via pseudo-element em vez de mask-image — assim o fade não
   esconde nem bloqueia as setas. Cor do fade controlada por
   `--evm-marquee-fade-color` (default preto, igual ao BG do hero). */
.evm-marquee::before,
.evm-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  min-width: 40px;
  max-width: 120px;
  pointer-events: none;
  z-index: 4;
}
.evm-marquee::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--evm-marquee-fade-color, #000) 0%,
    transparent 100%
  );
}
.evm-marquee::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--evm-marquee-fade-color, #000) 0%,
    transparent 100%
  );
}
.evm-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  /* `align-self: flex-start` evita o parent `align-items-center` centralizar
     a track wider que o container — sem isso, translateX(-50%) deixa metade
     do container vazia ao fim do loop. */
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 24px !important;
  padding: 4px 0 12px !important;
  overflow: visible !important;
  /* Anula scroll-snap e scroll horizontal — o movimento é pela animation. */
  scroll-snap-type: none !important;
  overflow-x: visible !important;
  animation: evm-marquee-scroll var(--evm-marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.evm-marquee-track::before,
.evm-marquee-track::after {
  content: none !important;
  display: none !important;
  flex: 0 !important;
}
.evm-marquee:hover .evm-marquee-track,
.evm-marquee:focus-within .evm-marquee-track {
  animation-play-state: paused;
}
@keyframes evm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Sem motion: para a animação e mantém scroll manual horizontal. */
@media (prefers-reduced-motion: reduce) {
  .evm-marquee::before,
  .evm-marquee::after { display: none; }
  .evm-marquee-track {
    animation: none;
    overflow-x: auto !important;
    width: 100% !important;
  }
}

/* ---- Override #1: hero-slider em modo marquee ---------------- */
body.page-index .evm-hero-slider[data-marquee] {
  /* o `overflow: hidden` do .evm-marquee + mask cuida do recorte;
     o container já é flex column align-items-center pelo blade. */
}
body.page-index .evm-hero-slider[data-marquee] .hero-slider-track {
  /* Mantém os tokens do hero (cards com max-width) mas força flex-marquee. */
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding-right: 0 !important;
}
body.page-index .evm-hero-slider[data-marquee] .evermonte-card {
  flex: 0 0 auto;
  width: clamp(280px, 78vw, 380px);
  scroll-snap-align: none;
}
@media (min-width: 768px) {
  body.page-index .evm-hero-slider[data-marquee] .evermonte-card {
    width: 360px;
  }
}
@media (min-width: 1024px) {
  body.page-index .evm-hero-slider[data-marquee] .evermonte-card {
    width: 380px;
  }
}

/* ---- Override #2: materials em modo marquee ------------------ */
body.page-index #materials .materials-slider[data-marquee] .evm-slider-track {
  /* Desliga o grid de desktop e o scroll-snap mobile, vira marquee puro. */
  display: flex !important;
  grid-template-columns: none !important;
  width: max-content !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 0 !important;
  gap: 24px !important;
}
body.page-index #materials .materials-slider[data-marquee] .evm-slider-card {
  flex: 0 0 auto;
  width: clamp(260px, 78vw, 340px);
  max-width: none;
  scroll-snap-align: none;
}
@media (min-width: 1024px) {
  body.page-index #materials .materials-slider[data-marquee] .evm-slider-card {
    width: 340px;
  }
}
/* Dots não fazem sentido no marquee — escondidos por garantia mesmo
   que o JS deixe o nó vazio no DOM. */
body.page-index .evm-hero-slider[data-marquee] .hero-slider-dots,
body.page-index [data-marquee] .evm-slider-dots {
  display: none !important;
}

/* ============================================================
   ARROWS-LOOP — carrossel manual com setas (sem auto-play).
   Aplicado em qualquer slider com [data-arrows-loop].
   - Fade lateral para esconder cards "cortados" nas pontas
   - Setas circulares prev/next por cima
   ============================================================ */
[data-arrows-loop] {
  position: relative;
}
[data-arrows-loop]::before,
[data-arrows-loop]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  min-width: 40px;
  max-width: 120px;
  pointer-events: none;
  z-index: 4;
}
[data-arrows-loop]::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--evm-loop-fade-color, #000) 0%,
    transparent 100%
  );
}
[data-arrows-loop]::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--evm-loop-fade-color, #000) 0%,
    transparent 100%
  );
}
.evm-loop-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 200ms var(--evm-ease),
    border-color 200ms var(--evm-ease);
  font-size: 16px;
  line-height: 1;
}
.evm-loop-arrow:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.85);
}
.evm-loop-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.evm-loop-arrow--prev { left: 12px; }
.evm-loop-arrow--next { right: 12px; }
@media (max-width: 575px) {
  .evm-loop-arrow { width: 36px; height: 36px; font-size: 13px; }
  .evm-loop-arrow--prev { left: 6px; }
  .evm-loop-arrow--next { right: 6px; }
}

/* ---- Setas de controle do marquee (legado, não mais usado) - */
.evm-marquee-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 200ms var(--evm-ease),
    border-color 200ms var(--evm-ease),
    opacity 200ms var(--evm-ease),
    transform 200ms var(--evm-ease);
  font-size: 16px;
  line-height: 1;
}
.evm-marquee-arrow:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.85);
}
.evm-marquee-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.evm-marquee-arrow--prev { left: 12px; }
.evm-marquee-arrow--next { right: 12px; }
@media (max-width: 575px) {
  .evm-marquee-arrow { width: 36px; height: 36px; font-size: 13px; }
  .evm-marquee-arrow--prev { left: 6px; }
  .evm-marquee-arrow--next { right: 6px; }
}

/* ============================================================
   DS v1.2 — PADRONIZAÇÃO TIPOGRÁFICA GLOBAL (2026-05-29)
   Pedido da cliente em 3 itens:
     · Caixa de títulos: sentence case (1ª maiúscula da frase, resto minúsculo)
     · Hierarquia: body 300 (light), subtítulos 200 (extra-light), títulos 600 (semibold)
     · Eliminar "negrito gritante" (fw-bold/700) fixo em qualquer elemento
   Aplicado no fim do arquivo pra garantir precedência sobre cascata.
   Pra desativar caso a caso: classe `.evm-keep-case` neutraliza o sentence-case.
   ============================================================ */

/* 1. SENTENCE-CASE em títulos — REMOVIDO 2026-07-21 (pedido do Maickel).
   A regra global de `text-transform: lowercase` + recapitalização da 1ª letra
   estava mangando nomes próprios e a casing correta de vários títulos do site.
   Agora os títulos renderizam com a capitalização escrita na origem (HTML/DB).
   `text-transform: none` mantido explícito para vencer qualquer herança. */
h1, h2, h3, h4, h5, h6,
.evm-h1, .evm-h2, .evm-h3,
.hero-title,
.card-title,
.solutions-title,
.post-title,
.post-card-title,
.exp-card h3,
.materials-highlight h3,
.glass-card-materials h3 {
  text-transform: none;
}
/* Exceção: marcar com `.evm-keep-case` quando o título precisa preservar
   capitalização original (ex.: nomes próprios em CAPS futuros). */
.evm-keep-case,
.evm-keep-case::first-letter {
  text-transform: none !important;
}
/* Exceção: conteúdo editorial dos posts (HTML vindo do admin) renderiza como
   foi escrito — h2 com <span class="chapter-num"> interno quebra o
   ::first-letter (recapitaliza o span e deixa o texto principal minúsculo). */
.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body h5, .post-body h6,
.post-body h1::first-letter, .post-body h2::first-letter, .post-body h3::first-letter,
.post-body h4::first-letter, .post-body h5::first-letter, .post-body h6::first-letter {
  text-transform: none;
}

/* 2. HIERARQUIA DE PESO ---------------------------------------
   body / parágrafos / textos comuns → light (300)
   subtítulos (.lead, .hero-subtitle, .subtitle, .evm-subtitle) → extra-light (200)
   títulos h1-h6 + classes-título → semibold (600)
   Override do bold gritante (fw-bold/700) → semibold (600) */
body,
body p,
body .text-base,
body .text-sm,
body .text-neutral-300,
body .text-neutral-400,
body .text-secondary,
body .text-body-secondary {
  font-weight: 300;
}
body .lead,
body .hero-subtitle,
body .subtitle,
body .evm-subtitle,
body .text-lg.text-neutral-300,
body .evm-materials-copy {
  font-weight: 200;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .evm-h1, body .evm-h2, body .evm-h3,
body .hero-title,
body .card-title,
body .solutions-title,
body .post-title,
body .post-card-title {
  font-weight: 600 !important;
}
/* 3. ELIMINAR BOLD "GRITANTE" — qualquer fw-bold (700) volta a 600 */
body .fw-bold,
body strong.fw-bold,
body b.fw-bold,
body .fw-bolder {
  font-weight: 600 !important;
}

/* ── Ajustes tipográficos — e-mail Maickel 01/07 ──────────────────────────────
   Itens 1 e 3: hero e títulos de bloco em fonte FINA (200) com a ênfase GROSSA (500),
   títulos de bloco a 48px. Vence o override global `font-weight:600 !important` acima. */
body.page-index .hero-title,
body.page-index .solutions-title,
body.page-index .evm-block-title {
  font-weight: 200 !important;
}
body.page-index .hero-title strong,
body.page-index .solutions-title strong,
body.page-index .evm-block-title strong {
  font-weight: 500 !important;
}
/* Títulos-statement dos blocos conceituais (#performance-insight / #interdependencias):
   peso alternado light 200 + ênfase 500 (Maickel 2026-07-22). Vence o override
   global font-weight:600 !important dos headings. */
body.page-index .evm-stmt-title {
  font-weight: 200 !important;
}
body.page-index .evm-stmt-title strong {
  font-weight: 500 !important;
  color: #fff;
}
body.page-index .solutions-title,
body.page-index .evm-block-title {
  font-size: 48px !important;
  line-height: 1.1;
}
@media (max-width: 767px) {
  body.page-index .solutions-title,
  body.page-index .evm-block-title {
    font-size: 32px !important;
  }
}

/* (2026-05-29) Removida regra CSS específica do #leadership-context —
   a proporção desbalanceada vem do conteúdo HTML cadastrado no admin
   (`<div class="row"><p class="col-md-6">...</p>...</div>`). O ajuste
   será feito direto no banco/admin, não via CSS. Card volta a full-width. */

/* =====================================================================
   PÁGINA "INSIGHTS" (.page-insights) — clone do miolo de evermonte.com/insights
   Tema CLARO. Tudo escopado em .page-insights p/ não colidir com o blog escuro.
   View: resources/views/blog/insights.blade.php
   Imagens de marketing esperadas em assets/img/:
     ins-hero.jpg · ins-decisoes.jpg · ins-cta-governanca.jpg
     ins-cta-potencial.jpg · ins-cta-posicoes.jpg
   ===================================================================== */
.page-insights{ background:#fff; color:#151515; font-family:var(--font-lufga); }
.page-insights em{ font-style:italic; font-weight:400; font-family:Georgia,"Times New Roman",serif; }
.page-insights .ins-shell{ max-width:1200px; margin:0 auto; padding:0 24px; }
.page-insights a{ color:inherit; }

/* ---- Hero ---- */
.page-insights .ins-hero{ position:relative; overflow:hidden; background:#0d1b1f url("../img/ins-hero.jpg") center top/cover no-repeat; }
.page-insights .ins-hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,18,22,.55), rgba(6,18,22,.30) 40%, rgba(6,18,22,.55)); }
.page-insights .ins-hero-inner{ position:relative; z-index:10; text-align:center; color:#fff; padding:150px 24px 48px; }
.page-insights .ins-hero-title{ margin:0; font-weight:600; line-height:1.05; letter-spacing:-.01em;
  font-size:clamp(34px,3.6vw,58px); }
.page-insights .ins-hero-title em{ display:inline-block; }
.page-insights .ins-hero-sub{ margin:18px 0 0; font-size:clamp(15px,1.4vw,20px); color:rgba(255,255,255,.85); }

/* ---- Botões / círculos compartilhados ---- */
.page-insights .ins-pill-btn{ display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  background:#fff; color:#151515; border-radius:999px; padding:7px 7px 7px 28px; font-weight:600; font-size:16px; }
.page-insights .ins-pill-btn--light{ background:#F5F5F5; }
.page-insights .ins-pill-icon{ width:46px; height:46px; border-radius:50%; background:#151515; color:#fff;
  display:grid; place-items:center; font-size:15px; }
.page-insights .ins-circle-btn{ width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; font-size:14px; }
.page-insights .ins-circle-btn--dark{ background:#151515; color:#fff; }
.page-insights .ins-circle-btn--ghost{ background:transparent; color:#151515; border:1.5px solid #C3C3C3; }

/* ---- Newsletter ---- */
.page-insights .ins-news-shell{ position:relative; z-index:10; padding-bottom:80px; }
.page-insights .ins-news-card{ background:#fff; border-radius:28px; padding:48px clamp(24px,4vw,60px);
  box-shadow:0 30px 60px rgba(0,0,0,.18); }
.page-insights .ins-news-title{ margin:0 0 14px; font-weight: 500; line-height:1.08; color:#151515; font-size:clamp(26px,3vw,40px); }
.page-insights .ins-news-sub{ margin:0 0 26px; color:#929292; font-size:16px; }
.page-insights .ins-news-pill{ display:flex; align-items:center; gap:6px; max-width:580px;
  background:#151515; border-radius:999px; padding:8px 8px 8px 26px; }
.page-insights .ins-news-input{ flex:1 1 50%; min-width:0; background:transparent; border:0; outline:0;
  color:#fff; font-size:16px; padding:14px 6px; font-family:inherit; }
.page-insights .ins-news-input::placeholder{ color:rgba(255,255,255,.6); }
.page-insights .ins-news-divider{ width:1px; align-self:stretch; margin:10px 4px; background:rgba(255,255,255,.18); }
.page-insights .ins-news-go{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:0; background:#fff;
  color:#111; display:grid; place-items:center; cursor:pointer; transition:transform .2s; }
.page-insights .ins-news-go:hover{ transform:translateX(2px); }
.page-insights .ins-news-lgpd{ display:flex; gap:8px; align-items:flex-start; max-width:580px; margin-top:14px;
  font-size:12.5px; color:#6b7680; }
.page-insights .ins-news-lgpd a{ color:#151515; text-decoration:underline; }

/* ---- Destaque principal ---- */
.page-insights .ins-feature{ display:flex; justify-content:flex-end; align-items:center; min-height:500px;
  background-color:#1f2d24; background-size:cover; background-position:left center; background-repeat:no-repeat; }
.page-insights .ins-feature-body{ width:48%; min-width:300px; display:flex; flex-direction:column; align-items:flex-end;
  justify-content:center; text-align:right; color:#fff; text-decoration:none;
  padding:56px clamp(28px,5vw,80px) 56px 24px; }
.page-insights .ins-feature-tags{ margin:0 0 16px; color:rgba(255,255,255,.7); font-size:15px; }
.page-insights .ins-feature-title{ margin:0 0 20px; font-weight: 500; font-size:clamp(28px,3.2vw,42px); }
.page-insights .ins-feature-excerpt{ margin:0 0 28px; max-width:520px; line-height:1.6; color:rgba(255,255,255,.8); }

/* ---- Destaque secundário + lista ---- */
.page-insights .ins-split{ display:grid; grid-template-columns:1fr 1fr; }
.page-insights .ins-split-feature{ position:relative; min-height:560px; display:flex; align-items:flex-end;
  padding:40px; background:#2b3a44 url("../img/ins-feature-2.jpg") center/cover no-repeat; }
.page-insights .ins-split-card{ position:relative; display:block; max-width:560px; background:#fff; color:#151515;
  border-radius:22px; padding:36px 40px 64px; box-shadow:0 24px 50px rgba(0,0,0,.2); text-decoration:none; }
.page-insights .ins-split-card-title{ margin:0 0 14px; font-weight: 500; font-size:22px; }
.page-insights .ins-split-card-excerpt{ margin:0; color:#929292; line-height:1.6; }
.page-insights .ins-split-card .ins-circle-btn{ position:absolute; right:28px; bottom:24px; }
.page-insights .ins-split-list{ display:flex; flex-direction:column; justify-content:center; padding:40px clamp(20px,4vw,64px); }
.page-insights .ins-list-item{ display:flex; align-items:center; gap:22px; padding:26px 0;
  border-bottom:1px solid #EFEFEF; text-decoration:none; color:#151515; }
.page-insights .ins-list-item:last-child{ border-bottom:0; }
.page-insights .ins-list-thumb{ flex:0 0 auto; width:96px; height:96px; border-radius:18px; background:linear-gradient(135deg,#E9ECEE,#D7DDE0) center/cover no-repeat; }
.page-insights .ins-list-text{ flex:1 1 auto; min-width:0; }
.page-insights .ins-list-title{ display:block; margin-bottom:8px; font-weight: 500; font-size:17px; line-height:1.25; }
.page-insights .ins-list-excerpt{ color:#929292; font-size:14px; line-height:1.5;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.page-insights .ins-list-item .ins-circle-btn{ flex:0 0 auto; }

/* ---- Faixa "decisões" + Categorias ---- */
.page-insights .ins-decisions{ display:grid; grid-template-columns:1fr 1fr; min-height:420px; }
.page-insights .ins-decisions-panel{ display:flex; flex-direction:column; justify-content:center;
  background:#151515; color:#fff; padding:clamp(40px,6vw,90px); }
.page-insights .ins-decisions-title{ margin:0 0 34px; font-weight: 500; line-height:1.1; font-size:clamp(26px,3vw,40px); }
.page-insights .ins-decisions-media{ background:#2b3a44 url("../img/ins-decisoes.jpg") center/cover no-repeat; }
.page-insights .ins-select-wrap{ position:relative; max-width:480px; }
.page-insights .ins-select{ -webkit-appearance:none; appearance:none; width:100%; cursor:pointer;
  background:#fff; color:#151515; border:0; border-radius:999px; padding:18px 56px 18px 28px; font-size:17px; font-family:inherit; }
.page-insights .ins-select-caret{ position:absolute; right:26px; top:50%; transform:translateY(-50%); pointer-events:none; color:#151515; }

/* ---- Grid "Evermonte Insights" ---- */
.page-insights .ins-grid-section{ padding:80px 0 70px; }
.page-insights .ins-grid-heading{ margin:0 0 50px; text-align:center; font-weight: 500; color:#151515; font-size:clamp(28px,3.4vw,44px); }
.page-insights .ins-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 30px; }
.page-insights .ins-card{ display:flex; flex-direction:column; text-decoration:none; color:#151515; }
.page-insights .ins-card-cover{ display:block; aspect-ratio:1/1; margin-bottom:18px; border-radius:18px; background:linear-gradient(135deg,#E9ECEE,#D7DDE0) center/cover no-repeat; }
.page-insights .ins-card-date{ margin-bottom:8px; color:#929292; font-size:13px; }
.page-insights .ins-card-title{ margin-bottom:10px; font-weight: 500; font-size:18px; line-height:1.25; }
.page-insights .ins-card-excerpt{ color:#929292; font-size:14px; line-height:1.55;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
.page-insights .ins-vermais-wrap{ display:flex; justify-content:center; margin-top:56px; }

/* ---- CTA largo (governança) ---- */
.page-insights .ins-cta-wide{ padding:30px 24px; }
.page-insights .ins-cta-wide-card{ position:relative; max-width:1760px; margin:0 auto; min-height:520px;
  display:flex; align-items:center; justify-content:center; border-radius:26px; overflow:hidden;
  background:#1a2a33 url("../img/ins-cta-governanca.jpg") center/cover no-repeat; }
.page-insights .ins-cta-wide-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.page-insights .ins-cta-wide-content{ position:relative; z-index:2; text-align:center; color:#fff; padding:40px; }
.page-insights .ins-cta-wide-title{ margin:0 0 34px; font-weight: 500; line-height:1.2; font-size:clamp(24px,2.6vw,38px); }

/* ---- CTA duplo ---- */
.page-insights .ins-cta-duo{ display:grid; grid-template-columns:2fr 1fr; gap:24px; max-width:1760px; margin:0 auto; padding:30px 24px 60px; }
.page-insights .ins-cta-tile{ position:relative; min-height:430px; display:flex; align-items:flex-end; overflow:hidden;
  border-radius:22px; text-decoration:none; background:#2b3a44 center/cover no-repeat; }
.page-insights .ins-cta-tile--potencial{ background-image:url("../img/ins-cta-potencial.jpg"); }
.page-insights .ins-cta-tile--posicoes{ background-color:#1F4461; background-image:url("../img/ins-cta-posicoes.jpg"); }
.page-insights .ins-cta-tile-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); }
.page-insights .ins-cta-tile-inner{ position:relative; z-index:2; width:100%; padding:44px; color:#fff; }
.page-insights .ins-cta-tile-title{ display:block; margin-bottom:22px; font-weight: 500; font-size:clamp(22px,2.4vw,32px); }
.page-insights .ins-ghost-btn{ display:inline-flex; align-items:center; gap:14px; color:#fff;
  border:1.5px solid rgba(255,255,255,.85); border-radius:999px; padding:7px 7px 7px 26px; font-size:15px; }
.page-insights .ins-ghost-btn .ins-circle-btn{ width:40px; height:40px; background:#fff; color:#151515; border:0; }

/* ---- Faixa decorativa de folhas ---- */
.page-insights .ins-leaf-band{ height:230px; background:#0e1c20 url("../img/ins-hero.jpg") center/cover no-repeat; }

/* ---- Responsivo ---- */
@media (max-width:991px){
  .page-insights .ins-feature,
  .page-insights .ins-split,
  .page-insights .ins-decisions,
  .page-insights .ins-cta-duo{ grid-template-columns:1fr; }
  .page-insights .ins-feature-body{ width:100%; align-items:flex-start; text-align:left; }
  .page-insights .ins-split-feature,
  .page-insights .ins-decisions-media{ min-height:300px; }
  .page-insights .ins-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .page-insights .ins-grid{ grid-template-columns:1fr; }
  .page-insights .ins-news-card{ padding:30px 20px; }
  .page-insights .ins-feature-body{ padding:40px 24px; }
}

/* =====================================================================
   PÁGINA CONTATO — layout "narrativa" (.page-contato-narrative)
   Foto fixa + frases no scroll, depois conteúdo claro (form/office/press).
   View: resources/views/pages/contact.blade.php · img: assets/img/contato-narrative.jpg
   ===================================================================== */
.page-contato-narrative #narrative-scroll-zone { height: 2400px; position: relative; }
.page-contato-narrative #narrative-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; overflow: hidden;
}
.page-contato-narrative #narrative-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.page-contato-narrative #narrative-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.page-contato-narrative #narrative-phrases {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.page-contato-narrative .narrative-phrase {
  position: absolute; width: 100%; max-width: 780px; padding: 0 40px; text-align: center;
  opacity: 0; transform: translateY(30px); transition: opacity .65s ease, transform .65s ease;
}
.page-contato-narrative .narrative-phrase.visible { opacity: 1; transform: translateY(0); }
.page-contato-narrative .narrative-phrase.leaving { opacity: 0; transform: translateY(-30px); transition: opacity .4s ease, transform .4s ease; }
.page-contato-narrative .narrative-phrase p {
  font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 300; line-height: 1.25; margin: 0; color: #fff; font-family: var(--font-lufga, sans-serif);
}
.page-contato-narrative .narrative-phrase p strong { font-weight: 600; color: #fff; }
body.page-contato-narrative.narrative-done #narrative-bg,
body.page-contato-narrative.narrative-done #narrative-phrases { display: none; }

.page-contato-narrative .page-below { background: #fff; position: relative; z-index: 10; }
.page-contato-narrative .contact-section-new { padding: 100px 0 80px; background: #fff; }
.page-contato-narrative .contact-section-new .inner { max-width: 600px; margin: 0 auto; padding: 0 24px; }
.page-contato-narrative .contact-form-head-new { margin-bottom: 48px; }
.page-contato-narrative .contact-form-eyebrow-new {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(0,0,0,.45); font-weight: 400; margin-bottom: 16px;
}
.page-contato-narrative .contact-form-eyebrow-new .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.page-contato-narrative .contact-form-head-new h2 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; color: #000; margin: 0 0 12px; line-height: 1.15; font-family: var(--font-lufga, sans-serif);
}
.page-contato-narrative .contact-form-head-new h2 strong { font-weight: 600; color: #000; }
.page-contato-narrative .contact-form-head-new p { color: rgba(0,0,0,.55); font-size: 16px; margin: 0; }

/* Form — tema claro */
.page-contato-narrative .contact-label { color: #000 !important; }
.page-contato-narrative .contact-input,
.page-contato-narrative .contact-textarea { background: #f7f7f7 !important; border-color: rgba(0,0,0,.12) !important; color: #000 !important; }
.page-contato-narrative .contact-input::placeholder,
.page-contato-narrative .contact-textarea::placeholder { color: rgba(0,0,0,.38) !important; }
.page-contato-narrative .evm-checkbox-label { color: rgba(0,0,0,.6) !important; }
.page-contato-narrative .evm-checkbox-label a { color: #000 !important; }
.page-contato-narrative .contact-form-lgpd { color: rgba(0,0,0,.45) !important; }

/* Campo multi-seleção "Como chegou até o Evermonte Institute?" (dropdown nativo via <details>) */
.page-contato-narrative .contact-multiselect { position: relative; }
.page-contato-narrative .contact-multiselect-summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; user-select: none;
  color: rgba(0,0,0,.55) !important;
}
.page-contato-narrative .contact-multiselect-summary::-webkit-details-marker { display: none; }
.page-contato-narrative .contact-multiselect-summary::after {
  content: ''; width: 8px; height: 8px; margin-left: 12px; flex-shrink: 0;
  border-right: 2px solid rgba(0,0,0,.4); border-bottom: 2px solid rgba(0,0,0,.4);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.page-contato-narrative .contact-multiselect[open] .contact-multiselect-summary::after {
  transform: rotate(-135deg) translateY(2px);
}
.page-contato-narrative .contact-multiselect[open] .contact-multiselect-summary {
  color: #000 !important; border-color: rgba(125,169,181,.6) !important;
}
.page-contato-narrative .contact-multiselect-panel {
  margin-top: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
  background: #f7f7f7; border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
}

/* Office box */
.page-contato-narrative .info-section { background: #fff; padding: 0 0 56px; }
.page-contato-narrative .info-section .inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.page-contato-narrative .office-box {
  border: 1px solid rgba(0,0,0,.1); border-radius: 20px; padding: 40px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.page-contato-narrative .office-box-left .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.4); margin-bottom: 12px; display: block; }
.page-contato-narrative .office-box-left h3 { font-size: 1.25rem; font-weight: 600; color: #000; margin: 0 0 12px; font-family: var(--font-lufga, sans-serif); }
.page-contato-narrative .office-box-left address { font-style: normal; color: rgba(0,0,0,.6); font-size: 15px; line-height: 1.7; margin: 0; }
.page-contato-narrative .office-box-left .office-hours { font-size: 13px; color: rgba(0,0,0,.4); margin: 12px 0 0; }
.page-contato-narrative .office-box-right { display: flex; flex-direction: column; gap: 20px; }
.page-contato-narrative .office-contact-item { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #000; transition: opacity .2s; cursor: pointer; }
.page-contato-narrative .office-contact-item:hover { opacity: .65; }
.page-contato-narrative .office-contact-icon { width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; color: #000; }
.page-contato-narrative .office-contact-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.4); display: block; margin-bottom: 2px; }
.page-contato-narrative .office-contact-value { font-size: 15px; font-weight: 500; color: #000; display: block; }

/* Press box */
.page-contato-narrative .press-section { background: #fff; padding: 0 0 100px; }
.page-contato-narrative .press-section .inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.page-contato-narrative .press-box { background: #0a0a0a; border-radius: 20px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.page-contato-narrative .press-box-left .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; display: block; }
.page-contato-narrative .press-box-left h3 { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 10px; font-family: var(--font-lufga, sans-serif); }
.page-contato-narrative .press-box-left p { color: rgba(255,255,255,.6); font-size: 15px; margin: 0; max-width: 420px; line-height: 1.6; }
.page-contato-narrative .press-box a.btn-press {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 400; letter-spacing: .04em; white-space: nowrap; transition: background .2s, border-color .2s; font-family: var(--font-lufga, sans-serif);
}
.page-contato-narrative .press-box a.btn-press:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

@media (max-width: 640px) {
  .page-contato-narrative .office-box { grid-template-columns: 1fr; padding: 28px 24px; }
  .page-contato-narrative .press-box { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
}

/* =====================================================================
   PÁGINA SOBRE / O INSTITUTO (.page-sobre) — layout "narrativa" (vídeo)
   View: resources/views/pages/about.blade.php
   Mecânica de narrativa duplicada (escopada) p/ não acoplar com contato.
   ===================================================================== */
.page-sobre #narrative-scroll-zone { height: 2800px; position: relative; }
.page-sobre #narrative-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; overflow: hidden; }
.page-sobre #narrative-bg video,
.page-sobre #narrative-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.page-sobre #narrative-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.52); }
.page-sobre #narrative-phrases { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.page-sobre .narrative-phrase { position: absolute; width: 100%; max-width: 820px; padding: 0 40px; text-align: center; opacity: 0; transform: translateY(30px); transition: opacity .65s ease, transform .65s ease; }
.page-sobre .narrative-phrase.visible { opacity: 1; transform: translateY(0); }
.page-sobre .narrative-phrase.leaving { opacity: 0; transform: translateY(-30px); transition: opacity .4s ease, transform .4s ease; }
.page-sobre .narrative-phrase p { font-size: clamp(1.8rem,4.5vw,3.4rem); font-weight: 300; line-height: 1.25; margin: 0; color: #fff; font-family: var(--font-lufga,sans-serif); }
.page-sobre .narrative-phrase p strong { font-weight: 600; color: #fff; }
body.page-sobre.narrative-done #narrative-bg,
body.page-sobre.narrative-done #narrative-phrases { display: none; }
/* Eyebrow de palavras-chave na capa (2026-06-03, item cliente) */
.page-sobre #narrative-eyebrow {
  position: fixed; top: clamp(96px, 13vh, 150px); left: 0; width: 100%; z-index: 2;
  text-align: center; pointer-events: none;
  font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78);
}
body.page-sobre.narrative-done #narrative-eyebrow { display: none; }

/* Utilitários de peso tipográfico (pedidos pontuais da cliente, 2026-06-03) */
.page-sobre .evm-w-extralight { font-weight: 200 !important; }
.page-sobre .evm-w-semibold { font-weight: 600 !important; }
.page-sobre .page-below { background: #fff; position: relative; z-index: 10; }

/* Shared */
.page-sobre .pg-shell { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.5rem,5vw,5rem); }
.page-sobre .pg-section { padding: clamp(4rem,8vw,8rem) 0; }
.page-sobre .pg-section--light { background: #fff; }
.page-sobre .pg-section--dark { background: #0b1c25; }
.page-sobre .pg-section--gray { background: #f5f5f3; }
.page-sobre .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.38); font-weight: 400; margin-bottom: 14px; }
.page-sobre .section-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.page-sobre .section-eyebrow--white { color: rgba(255,255,255,.4); }
.page-sobre .section-h2 { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: clamp(1.6rem,2.8vw,2.25rem); line-height: 1.2; color: #000; margin: 0 0 .25rem; }
.page-sobre .section-h2--white { color: #fff; }
.page-sobre .section-h2 strong { font-weight: 600; }

/* Propósito */
.page-sobre .purpose-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem,6vw,7rem); align-items: start; }
.page-sobre .purpose-body p { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: clamp(.95rem,1.4vw,1.0625rem); line-height: 1.75; color: #333; margin: 0 0 1.25rem; }

/* Data cards */
.page-sobre .data-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 1rem; margin-top: 2.5rem; }
.page-sobre .data-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 1.5rem 1.25rem 1.25rem; display: flex; flex-direction: column; }
.page-sobre .data-card-num { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: clamp(2rem,3.5vw,2.75rem); color: #fff; line-height: 1; letter-spacing: -.02em; }
.page-sobre .data-card-num sup { font-size: .4em; vertical-align: super; }
.page-sobre .data-card-text { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.55; margin: .75rem 0 auto; }
.page-sobre .data-card-source { font-family: var(--font-lufga,sans-serif); font-size: 10.5px; color: rgba(255,255,255,.2); margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.07); }

/* Market data — bento (2026-06-02: substitui .data-grid, mockup evermonte-market-data.html) */
.page-sobre .evm-market-bg *,
.page-sobre .evm-market-bg *::before,
.page-sobre .evm-market-bg *::after { box-sizing: border-box; }
.page-sobre .evm-market-bg {
  position: relative; width: 100%; max-width: 1100px; margin: 2.5rem auto 0;
  border-radius: 24px; overflow: hidden; padding: 24px;
  font-family: var(--font-lufga, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  background:
    radial-gradient(ellipse 60% 70% at 20% 40%, #5b9db5 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 75% 20%, #3a7a92 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 60% 80%, #4a6a78 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 85% 65%, #6b4a3a 0%, transparent 55%),
    radial-gradient(ellipse 40% 45% at 50% 55%, #7a4030 0%, transparent 55%),
    #2a4a5a;
}
.page-sobre .evm-market-bg .bento { display: grid; grid-template-columns: 1fr 1.1fr 0.95fr 0.85fr; grid-template-rows: 280px 160px; gap: 10px; }
.page-sobre .evm-market-bg .col1-r1  { grid-column: 1;     grid-row: 1; }
.page-sobre .evm-market-bg .col2-r1  { grid-column: 2;     grid-row: 1; }
.page-sobre .evm-market-bg .col3-r12 { grid-column: 3;     grid-row: 1 / 3; }
.page-sobre .evm-market-bg .col4-r1  { grid-column: 4;     grid-row: 1; }
.page-sobre .evm-market-bg .col12-r2 { grid-column: 1 / 3; grid-row: 2; }
.page-sobre .evm-market-bg .col4-r2  { grid-column: 4;     grid-row: 2; }
.page-sobre .evm-market-bg .card { border-radius: 18px; padding: 20px 20px 14px; display: flex; flex-direction: column; position: relative; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.page-sobre .evm-market-bg .card-solid { background: rgba(80,130,155,0.35); border: none; }
.page-sobre .evm-market-bg .card-clear { background: rgba(30,50,60,0.08); border: 1px solid rgba(255,255,255,0.22); }
.page-sobre .evm-market-bg .card-outline { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.5); }
.page-sobre .evm-market-bg .card-outline-dark { background: rgba(20,40,55,0.38); border: 1px solid rgba(255,255,255,0.32); }
.page-sobre .evm-market-bg .badge-icon { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.page-sobre .evm-market-bg .num { color: #fff; font-size: 60px; font-weight: 300; line-height: 1; letter-spacing: -3px; margin: 0; }
.page-sobre .evm-market-bg .num sup { font-size: 22px; font-weight: 300; letter-spacing: 0; vertical-align: super; }
.page-sobre .evm-market-bg .desc { font-size: 12.5px; color: rgba(255,255,255,0.68); line-height: 1.45; margin-top: 10px; flex: 1; }
.page-sobre .evm-market-bg .source { font-size: 10px; color: rgba(255,255,255,0.3); font-style: italic; margin-top: 8px; }
.page-sobre .evm-market-bg .eyebrow { font-size: 11.5px; color: rgba(255,255,255,0.65); line-height: 1.38; margin-bottom: 6px; }
.page-sobre .evm-market-bg .gauge-wrap { display: flex; justify-content: center; margin-top: auto; margin-bottom: 6px; }
.page-sobre .evm-market-bg .vert-pill-wrap { display: flex; justify-content: center; align-items: stretch; flex: 1; padding: 4px 0 14px; }
/* 2026-06-18: slider vertical (track + handle no topo) = referência da cliente */
.page-sobre .evm-market-bg .vert-slider { position: relative; width: 14px; border-radius: 999px; background: rgba(255,255,255,0.16); }
.page-sobre .evm-market-bg .vert-handle { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; width: 26px; height: 58px; border-radius: 999px; background: rgba(255,255,255,0.9); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.page-sobre .evm-market-bg .card-horiz { flex-direction: row; align-items: center; gap: 16px; padding: 20px 24px; }
.page-sobre .evm-market-bg .card-horiz .num { font-size: 48px; flex-shrink: 0; }
.page-sobre .evm-market-bg .horiz-right { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.page-sobre .evm-market-bg .horiz-right .desc { margin-top: 0; flex: unset; }
.page-sobre .evm-market-bg .pill-row { display: flex; align-items: center; gap: 10px; }
.page-sobre .evm-market-bg .toggle-pill { width: 44px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.88); flex-shrink: 0; }
.page-sobre .evm-market-bg .pill-track { flex: 1; height: 6px; background: linear-gradient(to right, rgba(255,255,255,0.18) 0%, rgba(40,80,100,0.65) 100%); border-radius: 3px; }
.page-sobre .evm-market-bg .prog-wrap { margin-top: 10px; }
.page-sobre .evm-market-bg .prog-track { height: 5px; background: rgba(255,255,255,0.18); border-radius: 3px; overflow: hidden; }
.page-sobre .evm-market-bg .prog-fill { height: 100%; background: rgba(255,255,255,0.85); border-radius: 3px; }
@media (max-width: 700px) {
  .page-sobre .evm-market-bg { border-radius: 18px; padding: 14px; }
  .page-sobre .evm-market-bg .bento { display: flex; flex-direction: column; gap: 10px; }
  .page-sobre .evm-market-bg .col1-r1,
  .page-sobre .evm-market-bg .col2-r1,
  .page-sobre .evm-market-bg .col3-r12,
  .page-sobre .evm-market-bg .col4-r1,
  .page-sobre .evm-market-bg .col12-r2,
  .page-sobre .evm-market-bg .col4-r2 { grid-column: unset; grid-row: unset; }
  .page-sobre .evm-market-bg .card { border-radius: 14px; padding: 18px 18px 12px; min-height: unset; }
  .page-sobre .evm-market-bg .gauge-wrap svg { width: 110px; height: auto; }
  .page-sobre .evm-market-bg .vert-pill-wrap { padding: 14px 0 10px; min-height: 130px; }
  .page-sobre .evm-market-bg .card-horiz { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 18px 12px; }
  .page-sobre .evm-market-bg .card-horiz .num { font-size: 52px; }
  .page-sobre .evm-market-bg .pill-row { width: 100%; }
  .page-sobre .evm-market-bg .num { font-size: 52px; letter-spacing: -2px; }
  .page-sobre .evm-market-bg .num sup { font-size: 20px; }
  .page-sobre .evm-market-bg .desc { font-size: 13px; }
}

/* Pilares */
.page-sobre .pillars-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.page-sobre .pilar-card { border: 1px solid rgba(0,0,0,.09); border-radius: 18px; padding: 2rem 1.75rem; }
.page-sobre .pilar-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(37,72,88,.07); display: flex; align-items: center; justify-content: center; color: #254858; font-size: 20px; margin-bottom: 1.25rem; }
.page-sobre .pilar-card h3 { font-family: var(--font-lufga,sans-serif); font-size: 1rem; font-weight: 500; color: #111; margin: 0 0 .6rem; }
.page-sobre .pilar-card p { font-family: var(--font-lufga,sans-serif); font-size: 14px; font-weight: 300; color: #555; line-height: 1.65; margin: 0; }

/* Pesquisas */
.page-sobre .research-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.page-sobre .research-img-wrap { border-radius: 18px; overflow: hidden; width: 100%; background: #1a2a32; aspect-ratio: 21/7; }
.page-sobre .research-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Soluções — layout 3+2 (3 por linha, 2 centralizados na 2ª linha), 2026-06-03 */
.page-sobre .solutions-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; margin-top: 2.5rem; }
.page-sobre .solution-card { flex: 0 1 calc(33.333% - 0.74rem); min-width: 0; box-sizing: border-box; border: 1px solid rgba(0,0,0,.09); border-radius: 18px; padding: 1.75rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
@media (max-width: 900px) { .page-sobre .solution-card { flex-basis: calc(50% - 0.55rem); } }
@media (max-width: 600px) { .page-sobre .solution-card { flex-basis: 100%; } }
.page-sobre .solution-card:hover { border-color: rgba(0,0,0,.18); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.page-sobre .solution-kicker { font-family: var(--font-lufga,sans-serif); font-size: 10.5px; font-weight: 400; color: rgba(0,0,0,.35); text-transform: uppercase; letter-spacing: .09em; }
.page-sobre .solution-card h3 { font-family: var(--font-lufga,sans-serif); font-size: .9375rem; font-weight: 500; color: #111; margin: 0; }
.page-sobre .solution-card p { font-family: var(--font-lufga,sans-serif); font-size: 13px; font-weight: 300; color: #555; line-height: 1.6; margin: 0; flex: 1; }
.page-sobre .solution-link { font-family: var(--font-lufga,sans-serif); font-size: 13px; font-weight: 400; color: #254858; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; margin-top: 4px; }

/* Manifesto */
.page-sobre .manifesto-inner { text-align: center; max-width: 700px; margin: 0 auto; }
.page-sobre .manifesto-inner p { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: clamp(1.25rem,2.8vw,2rem); line-height: 1.4; color: rgba(255,255,255,.88); margin: 0; }
.page-sobre .manifesto-inner p + p { margin-top: .4rem; }
.page-sobre .manifesto-inner .muted { color: rgba(255,255,255,.9); font-size: clamp(1rem,2vw,1.4rem); margin-top: 1.5rem; }

/* Newsletter + artigos */
.page-sobre .newsletter-head { max-width: 520px; margin-bottom: 2rem; }
.page-sobre .newsletter-head h2 { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: clamp(1.4rem,2.2vw,1.75rem); color: #000; margin: 0 0 1rem; }
.page-sobre .newsletter-head h2 strong { font-weight: 600; }
/* Texto de cadastro subordinado ao título (não concorre visualmente) — 2026-06-03 */
.page-sobre .newsletter-head .newsletter-sub { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: 14px; color: rgba(0,0,0,.5); margin: 0; line-height: 1.5; }
.page-sobre .newsletter-head p { font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: 15px; color: #555; margin: 0; }
.page-sobre .newsletter-form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 3rem; }
.page-sobre .newsletter-form input[type="text"],
.page-sobre .newsletter-form input[type="email"] { flex: 1; min-width: 200px; border: 1px solid rgba(0,0,0,.13); border-radius: 100px; padding: .6rem 1.25rem; font-family: var(--font-lufga,sans-serif); font-weight: 300; font-size: 14px; outline: none; background: #f7f7f7; color: #000; }
.page-sobre .sobre-news-lgpd { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: rgba(0,0,0,.5); margin: 0; }
.page-sobre .sobre-news-lgpd a { color: #000; text-decoration: underline; }
.page-sobre .articles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; margin-top: 1rem; padding-top: 3rem; border-top: 1px solid rgba(0,0,0,.1); }
.page-sobre .articles-head h3 { font-family: var(--font-lufga,sans-serif); font-size: 1rem; font-weight: 400; color: #111; margin: 0; }
.page-sobre .articles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1.1rem; }
.page-sobre .article-card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: box-shadow .2s; }
.page-sobre .article-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); }
.page-sobre .article-cover { aspect-ratio: 16/9; background: #1a2a32; overflow: hidden; }
.page-sobre .article-body { padding: 1rem 1.1rem; }
.page-sobre .article-kicker { font-family: var(--font-lufga,sans-serif); font-size: 10.5px; font-weight: 400; color: rgba(0,0,0,.35); text-transform: uppercase; letter-spacing: .07em; }
.page-sobre .article-body h4 { font-family: var(--font-lufga,sans-serif); font-size: 13.5px; font-weight: 500; color: #111; margin: 4px 0 6px; line-height: 1.4; }
.page-sobre .article-body p { font-family: var(--font-lufga,sans-serif); font-size: 12.5px; font-weight: 300; color: #666; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 768px) {
  .page-sobre .purpose-grid { grid-template-columns: 1fr; }
}

/* Centraliza o card #leadership-context na viewport SÓ onde marcado com
   .evm-ctx-center (ex.: comp-management). Contorna o container shrink-to-fit
   do hero de serviço/categoria (que deixa o conteúdo alinhado à esquerda).
   Faz o bloco ocupar 100vw e o flex interno centraliza o card de ~600px. */
.page-service-detail #leadership-context.evm-ctx-center { width: 100vw; margin-left: -24px; box-sizing: border-box; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 640px) { .page-service-detail #leadership-context.evm-ctx-center { margin-left: -32px; } }
@media (min-width: 768px) { .page-service-detail #leadership-context.evm-ctx-center { margin-left: -6vw; } }
/* Card menor (~600px) e centralizado em todas as soluções marcadas com .evm-ctx-center */
.page-service-detail #leadership-context.evm-ctx-center .bg-white {
  max-width: 600px; width: 100%; margin-left: auto; margin-right: auto;
  box-sizing: border-box; padding: clamp(2.5rem, 4vw, 3.5rem) !important;
}
/* Hardening (2026-06-01): remove o full-bleed via 100vw — fonte de overflow
   horizontal ("margem direita infinita") em desktops com scrollbar clássica
   (100vw inclui a barra de rolagem). Em navegadores com :has() (todos os
   atuais) o card é centralizado pela largura de CONTEÚDO (clientWidth, já sem
   a scrollbar): faz a coluna do hero ocupar 100% e centraliza o card de 600px
   dentro dela — resultado visual idêntico ao 100vw, mas sem nenhum overflow.
   O bloco width:100vw acima permanece como fallback p/ navegadores sem :has(). */
@supports selector(:has(*)) {
  body.page-service-detail .service-detail-hero-main:has(#leadership-context.evm-ctx-center) > .page-gutter {
    width: 100%;
  }
  .page-service-detail #leadership-context.evm-ctx-center {
    width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
  }
}
/* Cantos uniformes (2026-06-01): padroniza TODOS os cards/painéis das páginas
   de solução em 8px (= rounded-4). Os cards brancos já são 8px; aqui igualamos:
   - card CTA do rodapé (rounded-5 = 16px);
   - painéis glass (.evermonte-glass = 16px via regra global): pipeline-statement,
     service-pillar-card e seções glass. Escopado em .page-service-detail p/ NÃO
     mexer no glass dos carrosséis da home. Pra reverter p/ 16px: trocar o valor. */
body.page-service-detail .rounded-5.shadow-lg { border-radius: 8px !important; }
body.page-service-detail .evermonte-glass { border-radius: 8px !important; }

/* ============================================================
   2026-06-17: PADRÕES GLOBAIS DA REVISÃO LEADERSHIP PIPELINE
   ============================================================ */

/* --- Botão "glass" padrão (item 1) -----------------------------------------
   Efeito vitrificado real (gradiente vertical + blur), NÃO branco translúcido.
   Reutilizável em todas as páginas-solução: pílulas de hero, links de card,
   ações de CTA. Pílula 999px, sentence case (padrão visual da cliente). */
.evm-btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-lufga, 'Lufga', sans-serif); font-weight: 300;
  font-size: clamp(.78rem, 1.3vw, .9rem); line-height: 1; text-decoration: none;
  color: rgba(255,255,255,.9); cursor: pointer;
  padding: .72rem 1.4rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.evm-btn-glass:hover,
.evm-btn-glass:focus-visible {
  color: #fff; border-color: rgba(255,255,255,.42);
  background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.05) 100%);
}
.evm-btn-glass .evm-btn-glass-dash { width: 22px; height: 1.5px; background: rgba(255,255,255,.55); display: inline-block; flex-shrink: 0; }
/* Variante para fundo CLARO (mesmo vidro, traços/texto escuros) */
.evm-btn-glass--ink { color: rgba(20,20,20,.82); border-color: rgba(0,0,0,.16);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 50%, rgba(0,0,0,0) 100%); }
.evm-btn-glass--ink:hover { color: #111; border-color: rgba(0,0,0,.4);
  background: linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.02) 100%); }
.evm-btn-glass--ink .evm-btn-glass-dash { background: rgba(0,0,0,.4); }

/* --- Botão "voltar ao topo" global (itens 10/13) ---------------------------
   Fixo no canto inferior direito; aparece após rolar (classe .is-visible via JS).
   Vidro escuro discreto p/ combinar com qualquer página. */
.evm-to-top {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  width: 46px; height: 46px; border-radius: 999px; z-index: 1040;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer;
  background: linear-gradient(to bottom, rgba(255,255,255,.06) 0%, rgba(0,0,0,.55) 100%), rgba(10,10,10,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, border-color .2s ease;
}
.evm-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.evm-to-top:hover { border-color: rgba(255,255,255,.6); }
.evm-to-top svg { width: 16px; height: 16px; display: block; }
@media print { .evm-to-top { display: none !important; } }