/* ---------------------------------------------------------------
   1. Tokens
   Todas as cores do projeto ficam centralizadas aqui, em hexadecimal
   (nunca hsl()/rgba() nos componentes — quem precisa de transparência
   usa hex de 8 dígitos, ex. #09090b1a).
   --------------------------------------------------------------- */
:root {
  --background: #ffffff;
  --foreground: #09090b;
  --muted-foreground: #71717a;
  --popover: #ffffff;
  --border: #e4e4e7;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --ring: #a1a1aa;
  --title: #0e1f47;
  --yellow: #f8ee32;
  --blue-glow: #0e1f47;
  --dark-fg: #ffffff;
  --dark-fg-muted: #ffffffb3;
  --dark-line: #ffffff33;
  --dark-line-hover: #ffffff66;
  --dark-surface-hover: #ffffff1a;
  --radius: 0.5rem;
  --header-h: 4rem;
  --container: 80rem;
  --container-pad: 1.5rem;
}
html.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --muted-foreground: #a1a1aa;
  --popover: #0d0d0f;
  --border: #27272a;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --ring: #d4d4d8;
  --title: #fafafa;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --background: #09090b;
    --foreground: #fafafa;
    --muted-foreground: #a1a1aa;
    --popover: #0d0d0f;
    --border: #27272a;
    --accent: #27272a;
    --accent-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --ring: #d4d4d8;
    --title: #fafafa;
  }
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* O header agora é fixed (fora do fluxo): compensa o scroll de âncoras
     (#id) pra não deixar o alvo escondido atrás dele. */
  scroll-padding-top: var(--header-h);
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: .015rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: var(--title);
}

/* ---------------------------------------------------------------
   3. Botões (sistema .btn no estilo Bootstrap: base + variantes de
   cor .btn-{cor}/.btn-outline-{cor} + variantes de tamanho .btn-sm/lg)
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.75rem;
  padding: 1.65rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Tamanho: reduz proporcionalmente (x0.7) todas as dimensões do .btn base —
   padding, fonte, gap e ícone. letter-spacing em "em" já acompanha a fonte
   sozinho, sem precisar de valor próprio aqui. */
.btn-sm {
  gap: .35rem;
  padding: 1.155rem 1.225rem;
  font-size: .7rem;
}
.btn-sm svg {
  width: .7rem;
  height: .7rem;
}

/* Botões outline sempre com borda 1.5px (mais espessa que o padrão de 1px). */
.btn-outline-primary,
.btn-outline-accent,
.btn-outline-light {
  border-width: 1.5px;
}

/* Cor: primary (navy da marca) */
.btn-primary {
  background: var(--title);
  color: var(--primary-foreground);
}
.btn-primary:hover {
  filter: brightness(1.3);
}
.btn-outline-primary {
  border-color: var(--title);
  color: var(--title);
}
.btn-outline-primary:hover {
  background: var(--title);
  color: var(--primary-foreground);
}

/* Cor: accent (amarelo da marca) */
.btn-accent {
  background: var(--yellow);
  color: var(--title);
}
.btn-accent:hover {
  filter: brightness(.93);
}
.btn-outline-accent {
  border-color: var(--yellow);
  color: var(--title);
}
.btn-outline-accent:hover {
  background: var(--yellow);
}

/* Cor: light (branco, para uso sobre fundos escuros) */
.btn-light {
  background: var(--background);
  color: var(--title);
}
.btn-light:hover {
  filter: brightness(.95);
}
.btn-outline-light {
  border-color: var(--dark-fg);
  color: var(--dark-fg);
}
.btn-outline-light:hover {
  background: var(--dark-fg);
  color: var(--title);
}

/* ---------------------------------------------------------------
   4. Header
   --------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  padding: 0;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.5rem;
  margin: 0 auto;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--background);
  box-shadow: none;
  transition: box-shadow .2s ease;
}
.header.is-scrolled .nav {
  box-shadow: 0 4px 12px #0e1f4714;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: .5rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 1.125rem;
  font-weight: 700;
  transition: background-color .15s ease;
}
.logo:hover {
  background: var(--accent);
}
.logo img {
  display: block;
  height: 1.8rem;
  width: auto;
}

/* ---------------------------------------------------------------
   5. Menu principal
   Estrutura pensada para ser compatível com a saída de um
   Walker_Nav_Menu do WordPress: <ul class="menu"> > <li class="menu-item
   (menu-item-has-children)"> > <a> (+ <div class="mega-panel"> para itens
   com filhos, no lugar de um <ul class="sub-menu"> comum).
   --------------------------------------------------------------- */
.menu-primary {
  display: none;
  min-width: 0;
}
.menu {
  display: flex;
  align-items: center;
  gap: .25rem;
}
/* .menu-item não é positioned de propósito: o .mega-panel absoluto dentro
   dele precisa "escapar" até o .header (que é sticky = positioned) para
   conseguir se esticar por 100% da largura da tela, não só do <li>. */
.menu-item {
  position: static;
}
/* Exceção: itens com um dropdown simples (não mega painel) precisam ancorar
   o próprio <li>, já que o dropdown não deve se esticar até o .header. */
.menu-item-relative {
  position: relative;
}
/* Escopado a ".menu >" para não vazar para os <li class="menu-item"> aninhados
   dentro de .sub-menu/.sub-menu-grid, que usam sua própria tipografia. */
.menu > .menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .025em;
  transition: background-color .15s ease, color .15s ease;
}
.menu > .menu-item > a:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.menu > .menu-item-has-children > a[aria-expanded="true"] {
  background: #f4f4f580;
}
.menu > .menu-item > a .chevron {
  width: .75rem;
  height: .75rem;
  position: relative;
  top: 1px;
  transition: transform .3s ease;
}
.menu > .menu-item > a[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------
   6. Dropdowns do menu: base compartilhada + duas variantes
      (.mega-panel fluido de ponta a ponta / .simple-dropdown compacto)
   --------------------------------------------------------------- */
.dropdown {
  background: var(--popover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.dropdown[data-active="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 100%;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 16px 32px -16px #09090b2e;
  transform: translateY(-6px);
  overflow: hidden;
}
.mega-panel[data-active="true"] {
  transform: translateY(0);
}
.mega-panel-inner {
  display: grid;
  grid-template-columns: 1.5fr auto;
  align-items: flex-start;
  gap: 3rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem var(--container-pad);
  border-radius: 0 0 50px 50px !important;
}
/* Abaixo de 1180px o CTA (largura fixa) não deixa espaço suficiente para o
   grid de itens — a coluna de texto colapsa e as descrições quebram em
   4-5 linhas. Empilha o CTA abaixo do grid nessa faixa para manter uma
   largura de coluna previsível (ver .sub-menu-grid max-width). */
@media (max-width: 1179px) {
  .mega-panel-inner {
    grid-template-columns: 1fr;
  }
}

/* Dropdown compacto (não-mega): ancorado no próprio <li>, não no .header. */
.simple-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: .5rem;
  padding: .375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px -8px #09090b40;
  transform: translateY(-4px);
}
.simple-dropdown[data-active="true"] {
  transform: translateY(0);
}

.sub-menu {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  width: 15rem;
}
/* Usada junto com .mega-panel-cta: a coluna do grid é fluida (1.5fr, ocupa
   o espaço livre) e o CTA fica com largura própria (auto), sem sobrar
   espaço vazio no painel. */
.sub-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1.5rem;
  width: 100%;
  max-width: 40rem;
  min-width: 0;
}

/* Item com ícone em caixa + título + descrição (usado no grid) */
.menu-item-icon-link {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  padding: .5rem;
  border-radius: calc(var(--radius) - 2px);
}
.menu-item-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--title);
  transition: background-color .15s ease;
}
.menu-item-icon-link:hover .menu-item-icon,
.menu-item-icon-link:focus-visible .menu-item-icon {
  background: var(--yellow);
  color: var(--title);
}
.menu-item-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.menu-item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.menu-item-title {
  font-size: 1rem;
  font-weight: 500;
}
.menu-item-desc {
  font-size: .9125rem;
  color: var(--muted-foreground);
}

/* Item simples (ícone pequeno + texto, usado na lista de uma coluna) */
.menu-item-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .625rem;
  padding: .5rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 1rem;
  font-weight: 500;
  transition: background-color .15s ease;
}
.menu-item-link:hover {
  background: var(--accent);
}
.menu-item-link svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* ---------------------------------------------------------------
   7. CTA dentro do mega painel
   --------------------------------------------------------------- */
.mega-panel-cta {
  display: flex;
  flex-direction: column;
  width: 18rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--title);
}
.mega-panel-cta-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}
.mega-panel-cta-text {
  min-width: 0;
  padding: 1.25rem;
}
.mega-panel-cta-text h3 {
  color: var(--dark-fg);
  font-size: 1rem;
  margin-bottom: .25rem;
}
.mega-panel-cta-text p {
  font-size: .9125rem;
  color: var(--dark-fg-muted);
  margin-bottom: .75rem;
}

/* ---------------------------------------------------------------
   8. Ações à parte da navbar: busca + botão de contato
   --------------------------------------------------------------- */
.nav-actions {
  display: none;
  align-items: center;
  gap: .75rem;
  flex: none;
}

.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color .15s ease;
}
.search-toggle:hover {
  background: var(--accent);
}
.search-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
}
.search-field {
  width: 11rem;
  height: 2.375rem;
  padding: 0 .75rem 0 2.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f4f4f580;
  font-size: .875rem;
  transition: width .2s ease, border-color .15s ease, background-color .15s ease;
}
.search-field::placeholder {
  color: var(--muted-foreground);
}
.search-field:focus {
  outline: none;
  width: 14rem;
  border-color: var(--ring);
  background: var(--background);
}
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.search-submit {
  position: absolute;
  left: .625rem;
  display: flex;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.search-submit svg {
  width: 1rem;
  height: 1rem;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   9. Botão do menu mobile
   --------------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  cursor: pointer;
  flex: none;
}
.menu-toggle:hover {
  background: var(--accent);
}
.menu-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.menu-toggle-icon line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .15s ease;
}
.menu-toggle[aria-expanded="true"] .bar-top {
  transform: translateY(5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .bar-mid {
  opacity: 0;
  transform: scaleX(.4);
}
.menu-toggle[aria-expanded="true"] .bar-bot {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------------------------------------------------------------
   10. Menu mobile
   --------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 40;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: #fffffff2;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-menu {
    background: #ffffff80;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
.mobile-menu[hidden] {
  display: none;
}
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  overflow-y: auto;
  animation: zoom-in .3s ease-out;
}
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.mobile-search {
  margin-bottom: .5rem;
}
.mobile-search .search-field {
  width: 100%;
}
.mobile-search .search-field:focus {
  width: 100%;
}
.mobile-heading {
  margin-top: .75rem;
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.mobile-heading:first-child {
  margin-top: 0;
}
.mobile-actions {
  margin-top: 1rem;
}
.mobile-actions .btn {
  width: 100%;
}

/* ---------------------------------------------------------------
   11. Breakpoint md (900px)
   --------------------------------------------------------------- */
@media (min-width: 900px) {
  .menu-primary {
    display: block;
  }
  .nav-actions {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-menu {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   12. Hero: showcase de recursos (navegação só pelos bullets, sem
   scroll-jacking — ver .showcase-pagination / main.js)
   --------------------------------------------------------------- */
.showcase {
  /* Começa no topo real da viewport: o header flutua por cima (fixed,
     fora do fluxo), então o hero preenche a tela inteira atrás dele. */
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: var(--background);
}
.showcase:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: -3px;
}

/* Painel que troca de cor conforme o slide ativo */
.showcase-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  /* Compensa o header fixed: o conteúdo centralizado não fica embaixo
     dele, só o fundo/vídeo do slide é que toca o topo real. */
  padding-top: var(--header-h);
  background-color: var(--slide-bg, #ffffff);
  color: var(--slide-fg, #000000);
  transition: background-color .7s ease, color .7s ease;
}
/* Sem max-width/centralização: em telas largas isso deixava uma folga
   nas duas pontas, impedindo o vídeo de tocar a borda direita real. */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
}

/* Coluna esquerda: texto e paginação (o CTA agora fica dentro de cada
   slide, logo abaixo do parágrafo — ver .showcase-cta). */
.pane-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem 4.5rem;
}
.showcase-pagination {
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  display: flex;
  gap: .5rem;
}
.showcase-dot {
  height: 4px;
  width: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #09090b33;
  cursor: pointer;
  transition: width .5s cubic-bezier(.4, 0, .2, 1), background-color .5s ease;
}
.showcase-dot:hover {
  background: #09090b66;
}
.showcase-dot[aria-current="true"] {
  width: 3rem;
  background: #09090bcc;
}
.showcase-dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.showcase-slides {
  position: relative;
  width: 100%;
  height: 26rem;
}
.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.showcase-slide[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.showcase-slide h2 {
  margin: 0;
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: .98;
}
.showcase-slide p {
  margin: 1.75rem 0 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
}

/* Fica dentro de cada slide, logo abaixo do parágrafo (fluxo normal,
   não mais posicionado sobre a paginação). Cor/tamanho/tipografia vêm
   do sistema .btn (ver seção 3) — aqui só o espaçamento específico do slide. */
.showcase-cta {
  margin-top: 2rem;
}

/* Coluna direita: vídeo único por slide, ocupando o pane-media inteiro */
.pane-media {
  display: none;
  position: relative;
  overflow: hidden;
}
.media-track {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--index, 0) * -100%));
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.media-track figure {
  width: 100%;
  height: 100%;
  margin: 0;
}
.media-track video,
.media-track img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width: 768px) {
  .showcase-grid {
    grid-template-columns: 1.1fr .9fr;
  }
  .pane-text {
    padding: 6rem 9rem;
    border-right: 1px solid #09090b1a;
  }
  .showcase-pagination {
    bottom: 4rem;
    left: 4rem;
  }
  .pane-media {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .showcase-slide,
  .media-track,
  .showcase-dot,
  .showcase-panel {
    transition-duration: .01ms;
  }
}

/* ---------------------------------------------------------------
   13. Soluções (fundo claro, cards com CTA, 4 por linha no desktop)
   --------------------------------------------------------------- */
.features {
  position: relative;
  overflow: hidden;
  background: var(--title);
  padding: 8rem var(--container-pad);
}
/* Bola decorativa amarela, do lado oposto ao título, que se move na
   vertical via parallax (ver main.js) e passa por baixo dos cards. */
.features-blob {
  position: absolute;
  top: -100px;
  right: 7.5%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: var(--yellow);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.features-header {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto 6rem;
}
.features-header h2 {
  max-width: 34rem;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  color: var(--dark-fg);
}
.features-header p {
  max-width: 35rem;
  color: var(--dark-fg-muted);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
}
.features-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: var(--container);
  margin: 0 auto;
}
.feature-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: var(--background);
  /* box-shadow: 0 1px 2px #09090b0a; */
  gap: .5rem;
}
.feature-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 2rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--title);
}
.feature-card-icon svg {
  width: 1.875rem;
  height: 1.875rem;
}
.feature-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .375rem;
  letter-spacing: .01em;
}
.feature-card p {
  line-height: 1.5;
  padding-bottom: 2rem;
}
/* Cor/tamanho/tipografia vêm do sistema .btn (ver seção 3) — aqui só
   o posicionamento específico dentro do card. */
.feature-card-link {
  align-self: flex-start;
  margin-top: auto;
}

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

/* ---------------------------------------------------------------
   14. Cases: carrossel com peek do próximo slide, fundo escuro
   --------------------------------------------------------------- */
.cases {
  overflow-x: hidden;
  background: var(--accent);
  padding: 8rem 0;
}
.cases-carousel {
  position: relative;
}
.cases-viewport {
  overflow: visible;
}
.cases-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  /* Mesmo início do container centralizado (max-width: var(--container))
     usado pelo card acima: o gutter mínimo é --container-pad, mas em telas
     largas o recuo cresce para acompanhar a borda do container centralizado. */
  padding-left: max(var(--container-pad), calc((100% - var(--container)) / 2));
}
.cases-slide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  flex: 0 0 calc(100% - (var(--container-pad) * 2));
  max-width: calc(var(--container) - (var(--container-pad) * 2));
}
.cases-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--foreground);
}
.cases-media img,
.cases-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cases-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cases-stat-number {
  color: var(--title);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
}
.cases-stat-caption {
  max-width: 11rem;
  color: var(--title);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
.cases-content {
  padding: 0 2rem;
}
.cases-divider {
  display: block;
  width: 2.75rem;
  height: 4px;
  margin: 2rem 0;
  border-radius: 999px;
  background: var(--yellow);
}
.cases-content h2 {
  color: var(--title);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: 0.03rem;
}
.cases-content p {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  letter-spacing: 0.03rem;
}
.cases-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}
.cases-person {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.cases-person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--title);
  color: var(--yellow);
}
.cases-person-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cases-person-avatar svg {
  width: 1.25rem;
  height: 1.25rem;
}
.cases-person-info {
  display: flex;
  flex-direction: column;
}
.cases-person-name {
  color: var(--title);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.cases-person-role {
  color: var(-  -foreground);
  font-size: .8125rem;
  letter-spacing: .03em;
}
.cases-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--container);
  margin: 2.5rem auto 0;
  padding: 0 var(--container-pad);
}
.cases-pagination {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-right: auto;
}
.cases-dot {
  height: 4px;
  width: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: width .5s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
}
.cases-dot:hover {
  background: var(--ring);
}
.cases-dot[aria-current="true"] {
  width: 3rem;
  background: var(--title);
}
.cases-playtoggle,
.cases-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--title);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.cases-playtoggle:hover,
.cases-arrow:hover {
  background: var(--accent);
  border-color: var(--ring);
}
.cases-playtoggle svg,
.cases-arrow svg {
  width: 1rem;
  height: 1rem;
}
.cases-arrows {
  display: flex;
  gap: .5rem;
}

@media (min-width: 768px) {
  .cases-slide {
    flex: 0 0 78%;
    max-width: none;
  }
  .cases-slide {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .cases-slide {
    flex: 0 0 80%;
  }
}

/* ---------------------------------------------------------------
   15. Vídeo institucional (fundo claro, vídeo + texto em 2 colunas)
   --------------------------------------------------------------- */
.partner-video {
  background: var(--yellow);
  padding: 8rem var(--container-pad);
}
.partner-video-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.partner-video-inner h2 {
  max-width: 32rem;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
  margin-bottom: 2rem;
}
.partner-video-text p {
  color: var(--title);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .partner-video-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
  .partner-video-inner h2 {
    margin-bottom: 0;
    margin-top: -2.5rem;
  }
  .partner-video-text {
    max-width: 36rem;
  }
}

/* Faixa de cards em looping infinito (marquee): 2 linhas, cada uma com o
   conteúdo duplicado lado a lado — anima -50% e volta a 0 sem emenda
   visível, já que a 2ª metade é idêntica à 1ª. Linhas em sentidos opostos
   via animation-direction: reverse. */
.partner-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
}
.marquee-row {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-row-right {
  animation-direction: reverse;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee-track {
  display: flex;
  flex: none;
  gap: 1.25rem;
  padding: 0 .5rem;
}
.marquee-card {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  flex: none;
  width: 20rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: solid var(--title) 1px;
  background: var(--yellow);
}
.marquee-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--title);
  color: var(--yellow);
}
.marquee-card-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.marquee-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.marquee-card-title {
  margin-bottom: .25rem;
  color: var(--title);
  font-size: 1.125rem;
  font-weight: 600;
}
.marquee-card-desc {
  color: var(--title);
  font-size: 1rem;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-row {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   16. Sobre em vídeo (fundo claro, vídeo + texto em 2 colunas)
   --------------------------------------------------------------- */
.about-video {
  background: var(--background);
}
.about-video-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 0 auto;
}
.about-video-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--foreground);
}
.about-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--title);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, filter .2s ease;
}
.about-video-play:hover {
  filter: brightness(.93);
  transform: translate(-50%, -50%) scale(1.06);
}
.about-video-play svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: .25rem;
}
.about-video-play[hidden] {
  display: none;
}
.about-video-content {
  padding: 2.5rem var(--container-pad);
}
@media (min-width: 768px) {
  .about-video-content {
    padding-left: 0;
    /* Alinha a borda direita do texto com o mesmo limite do container
       centralizado usado pelo resto do site, já que .about-video-inner
       ocupa a largura total da seção (sem padding). */
    padding-right: max(var(--container-pad), calc((100vw - var(--container)) / 2));
  }
}
.about-video-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.about-video-content p {
  line-height: 1.6;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .about-video-inner {
    grid-template-columns: 1.15fr .85fr;
    gap: 6rem;
  }
}

/* ---------------------------------------------------------------
   17. Accordion (fundo claro, lista de itens expansíveis via
   <details>/<summary> nativos — sem JS necessário)
   --------------------------------------------------------------- */
.accordion {
  background: var(--accent);
  padding: 8rem var(--container-pad);
}
.accordion-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: var(--container);
  margin: 0 auto;
}
.accordion-header {
  display: flex;
  flex-direction: column;
}
.accordion-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 1.25rem;
  padding: .375rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--title);
  font-size: .8125rem;
  font-weight: 600;
}
.accordion-header h2 {
  font-size: clamp(2.5rem, 5.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.accordion-header p {
  color: var(--muted-foreground);
  line-height: 1.6;
}
.accordion-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 900px) {
  .accordion-inner {
    grid-template-columns: .75fr 1.25fr;
    align-items: start;
    gap: 8rem;
  }
  .accordion-header {
    position: sticky;
    top: 6rem;
  }
  .accordion-list {
    min-width: 0;
  }
}
.accordion-item {
  border-radius: 1rem;
  background: var(--background);
  overflow: hidden;
}
.accordion-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
}
.accordion-question::-webkit-details-marker {
  display: none;
}
.accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--title);
  transition: transform .2s ease;
}
.accordion-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.accordion-item[open] .accordion-icon {
  transform: rotate(45deg);
}
.accordion-answer {
  padding: 0 1.5rem 1.5rem;
}
.accordion-answer p {
  max-width: 42rem;
  color: var(--foreground);
  line-height: 1.6;
}
.accordion-item .accordion-answer ul li {
  color: var(--foreground);
}

/* ---------------------------------------------------------------
   18. CTA final (fundo amarelo, centralizado)
   --------------------------------------------------------------- */
.final-cta-media {
  height: 85vh;
  overflow: hidden;
}
.final-cta-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.final-cta {
  position: relative;
  z-index: 1;
  padding: 0 var(--container-pad);
}
.final-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--container);
  /* Puxa o card pra cima em metade da altura da imagem acima, sobrepondo
     a base dela. */
  margin: -6rem auto 0;
  padding: 4rem;
  border-radius: 2rem;
  background: var(--yellow);
  /* Garante que o card continue distinguível mesmo sobrepondo um trecho
     escuro da imagem acima (mesma família de cor do --title): a borda
     clara marca a silhueta e a sombra separa do fundo. */
  text-align: left;
}
.final-cta h2 {
  font-size: clamp(1.75rem, 5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 0;
}
.final-cta p {
  max-width: 38rem;
  margin: 0 auto 2rem;
  color: var(--dark-fg-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   19. Footer (fundo navy, marca + menus + endereços)
   --------------------------------------------------------------- */
.site-footer {
  background: var(--background);
  padding: 8rem var(--container-pad) 0;
  font-weight: 400;
  letter-spacing: .015rem;
}
.footer-top {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: var(--container);
  margin: 0 auto;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}
.footer-brand .logo {
  display: inline-flex;
  padding: 0;
  color: var(--title);
  font-size: 1.25rem;
  font-weight: 400;
}
.footer-brand .logo img {
  height: 4rem;
}
.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
}
.footer-brand p {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 14rem;
  margin-top: 0;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.6;
}
.footer-social {
  display: flex;
  flex: 1 0 100%;
  gap: .75rem;
  margin-bottom: .75rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--title);
  margin-right: .7rem;
  transition: background-color .15s ease;
}
.footer-social a:hover {
  background: var(--accent);
}
.footer-social svg {
  width: 1.125rem;
  height: 1.125rem;
}
.footer-menu h3,
.footer-addresses h3 {
  margin-bottom: 1.25rem;
  color: var(--title);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.footer-menu ul {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.footer-menu a {
  color: var(--muted-foreground);
  font-weight: 400;
  transition: color .15s ease;
}
.footer-menu a:hover {
  color: var(--title);
}
.footer-addresses {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.footer-address {
  color: var(--muted-foreground);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
}
.footer-address strong {
  display: block;
  margin-bottom: .375rem;
  color: var(--title);
  font-weight: 600;
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem 0;
}
.footer-bottom p {
  color: var(--muted-foreground);
  font-size: .8125rem;
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  color: var(--muted-foreground);
  font-size: .8125rem;
  transition: color .15s ease;
}
.footer-legal a:hover {
  color: var(--title);
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------
   20. Páginas internas: hero simples + introdução em formato de
   artigo (texto corrido) + depoimento — usados nas páginas de
   Soluções, Qlik Partner, Quem Somos, Treinamento etc.
   --------------------------------------------------------------- */
/* Mesma altura/visual do hero da home (.showcase): ocupa a viewport
   inteira atrás do header fixed, 2 colunas (texto + mídia full-bleed).
   Única diferença: sem carrossel, um slide único e estático. */
.page-hero {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: var(--background);
}
.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  padding-top: var(--header-h);
}
.page-hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem 4.5rem;
}
.page-hero-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 1.25rem;
  color: var(--title);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-hero h1 {
  max-width: 32rem;
  font-size: clamp(3rem, 6.5vw, 5rem);
  line-height: .98;
  margin-bottom: 0;
}
.page-hero p {
  margin: 1.75rem 0 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.5;
}
.page-hero-cta {
  margin-top: 2rem;
}
.page-hero-media {
  display: none;
  position: relative;
  overflow: hidden;
}
.page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Variante da página de Contato: no lugar da imagem, o formulário —
   visível em qualquer largura (a mídia normal só aparece no desktop). */
.page-hero-tall {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-hero-media.page-hero-form {
  display: flex;
  align-items: center;
  background: var(--title);
  padding: 3rem 2rem;
}
.page-hero-form .contact-form {
  width: 100%;
}
.page-hero-form .form-group label {
  color: var(--dark-fg);
}
.page-hero-form .form-group input,
.page-hero-form .form-group textarea,
.page-hero-form .form-group select {
  border-color: var(--dark-line);
}
.page-hero-form .form-note {
  color: var(--dark-fg-muted);
}
.page-hero-form .form-note a {
  color: var(--dark-fg);
  text-decoration: underline;
}
@media (min-width: 768px) {
  .page-hero-inner {
    grid-template-columns: 1.1fr .9fr;
  }
  .page-hero-text {
    padding: 6rem 7rem;
    border-right: 1px solid #09090b1a;
  }
  .page-hero-media {
    display: flex;
  }
  /* Páginas sem imagem no hero (ex: Contato, Política de Privacidade):
     o texto ocupa a largura toda, sem a divisória que só faz sentido
     ao lado de uma segunda coluna. */
  .page-hero-inner > .page-hero-text:only-child {
    grid-column: 1 / -1;
    border-right: none;
  }
}

.page-intro {
  padding: 8rem var(--container-pad);
  background: var(--accent);
}
.page-intro-inner {
  max-width: 48rem;
  margin: 0 auto;
}
.page-intro h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.page-intro-inner > p {
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.page-intro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.page-intro-badge {
  padding: .5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--title);
  font-size: .8125rem;
  font-weight: 600;
}
.page-intro-inner + .page-intro-inner {
  margin-top: 4rem;
}
.page-intro-split {
  max-width: var(--container);
}
.page-intro-split-text h2 {
  margin-bottom: 2.25rem;
}
.page-intro-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.page-intro-block {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--background);
}
.page-intro-block-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--title);
}
.page-intro-block-icon svg {
  width: 1.875rem;
  height: 1.875rem;
}
.page-intro-block-text {
  min-width: 0;
}
.page-intro-block h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .375rem;
  letter-spacing: .01em;
}
.page-intro-block p {
}
@media (min-width: 768px) {
  .page-intro-split {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 3rem;
    align-items: start;
  }
  .page-intro-split-text {
    position: sticky;
    top: 10rem;
  }
}

.page-testimonial {
  padding: 5rem var(--container-pad);
  background: var(--title);
}
.page-testimonial-inner {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.page-testimonial blockquote {
  color: var(--dark-fg);
  font-size: clamp(1.375rem, 2.8vw, 1.75rem);
  line-height: 1.4;
  margin: 0 0 1.5rem;
}
.page-testimonial cite {
  display: block;
  color: var(--dark-fg-muted);
  font-style: normal;
  font-size: .9375rem;
}

.page-intro-inner ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}
.page-intro-inner ul li {
  list-style: disc;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: .5rem;
}
.page-intro-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}
.page-intro-columns h3 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .page-intro-columns {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* ---------------------------------------------------------------
   21. Página de Contato: formulário + informações de contato
   --------------------------------------------------------------- */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}
.contact-info-item strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--title);
  font-size: .9375rem;
}
.contact-info-item span,
.contact-info-item a {
  color: var(--muted-foreground);
  line-height: 1.6;
}
.contact-info-item a:hover {
  color: var(--title);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.form-group label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--title);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: .875rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  font: inherit;
  font-size: .9375rem;
  color: var(--foreground);
  transition: border-color .15s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--title);
}
.form-group textarea {
  resize: vertical;
  min-height: 9rem;
}
.form-note {
  font-size: .8125rem;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .page-hero-form {
    padding: 4rem;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------
   22. Blog em destaque (mesmo carrossel/arquitetura de .cases, com
   thumb de imagem — só troca stat+divisor por um eyebrow simples).
   --------------------------------------------------------------- */
.cases-eyebrow {
  display: inline-flex;
  margin-bottom: 1.25rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  background: #f8ee3340;
  color: var(--title);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   23. Lista de posts do blog (todos os artigos, com filtros de
   categoria/busca/ordenação — referência: "Recent posts" da
   Databricks. Filtros ainda sem lógica real de busca/ordenação.)
   --------------------------------------------------------------- */
.blog-list {
  padding: 6rem var(--container-pad);
}
.blog-list-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.blog-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.blog-list-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.blog-list-archive {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--title);
  font-weight: 600;
}
.blog-list-archive svg {
  width: 1rem;
  height: 1rem;
}
.blog-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 4rem;
}
.blog-filters select,
.blog-filters input {
  width: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  font: inherit;
  font-size: .9375rem;
  color: var(--foreground);
}
.blog-filters select:focus,
.blog-filters input:focus {
  outline: none;
  border-color: var(--title);
}
.blog-rows {
  border-top: 1px solid var(--border);
}
.blog-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
.blog-row-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.blog-row-category {
  display: inline-flex;
  align-self: flex-start;
  padding: .25rem .625rem;
  border-radius: 999px;
  background: #f8ee3340;
  color: var(--title);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.blog-row-date {
  color: var(--muted-foreground);
  font-size: .8125rem;
}
.blog-row-title {
  color: var(--title);
  font-size: 1.25rem;
  font-weight: 600;
  transition: opacity .15s ease;
}
.blog-row-title:hover {
  opacity: .7;
}
.blog-row-time {
  color: var(--muted-foreground);
  font-size: .8125rem;
}

@media (min-width: 768px) {
  .blog-filters {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .blog-row {
    grid-template-columns: 12rem 1fr 8rem;
    align-items: center;
    gap: 1.5rem;
  }
  .blog-row-time {
    text-align: right;
  }
}