/* ==========================================================================
   Digitalli - Componentes reutilizaveis
   Todo componente funciona tanto em secao escura quanto em `.dg-invert`,
   porque le apenas tokens (--dg-bg, --dg-text, --dg-hairline...).
   ========================================================================== */

/* ==========================================================================
   1. Preloader (animacao de abertura com o simbolo da marca)
   ========================================================================== */
/* Padrao: escondido. Sem JS a pagina nunca fica presa atras da abertura.
   So aparece quando boot.js marcou o documento e o usuario nao pediu menos
   movimento nem viu a abertura nesta sessao. */
.dg-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--dg-z-preloader);
  display: none;
  place-items: center;
  background: var(--dg-bg-sunken);
  transition: opacity var(--dg-dur-slow) var(--dg-ease),
    visibility var(--dg-dur-slow) var(--dg-ease);
}

.dg-js:not(.dg-reduced):not(.dg-intro-seen) .dg-preloader {
  display: grid;
}

.dg-preloader[hidden] {
  display: none !important;
}

.dg-preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dg-preloader__inner {
  display: grid;
  justify-items: center;
  gap: var(--dg-space-5);
}

/* O simbolo surge por uma mascara que sobe, como uma placa sendo revelada. */
.dg-preloader__mark {
  position: relative;
  display: block;
  width: min(108px, 22vw);
  animation: dg-mark-in 900ms var(--dg-ease-out) both;
}

.dg-preloader__mark img {
  width: 100%;
  height: auto;
  clip-path: inset(100% 0 0 0);
  animation: dg-mark-wipe 820ms var(--dg-ease-out) 120ms forwards;
}

/* Fio vermelho que percorre o simbolo, ecoando o pulso das trilhas do hero. */
.dg-preloader__mark::after {
  content: "";
  position: absolute;
  inset-inline: -8%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dg-red), transparent);
  box-shadow: 0 0 14px 2px var(--dg-red-glow);
  animation: dg-mark-scan 820ms var(--dg-ease-out) 120ms forwards;
}

@keyframes dg-mark-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dg-mark-wipe {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes dg-mark-scan {
  from {
    top: 100%;
    opacity: 1;
  }
  to {
    top: 0%;
    opacity: 0;
  }
}

.dg-preloader__word {
  font-family: var(--dg-font-mono);
  font-size: var(--dg-fs-xs);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: dg-word-in 700ms var(--dg-ease-out) 620ms forwards;
}

@keyframes dg-word-in {
  from {
    opacity: 0;
    letter-spacing: 0.9em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.5em;
  }
}

.dg-preloader__bar {
  position: relative;
  width: min(200px, 40vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  border-radius: var(--dg-radius-pill);
}

.dg-preloader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--dg-red), var(--dg-red-300));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform 220ms linear;
}

/* ==========================================================================
   2. Cabecalho e navegacao
   ========================================================================== */
/* Como no site em WordPress: o cabecalho flutua transparente sobre o hero e,
   ao rolar, vira uma barra escura recuada das laterais, com os cantos de baixo
   arredondados. Nunca empurra o conteudo — por isso o hero e o cabecalho de
   pagina reservam a altura dele no proprio padding. */
.dg-header {
  position: fixed;
  inset-inline: var(--dg-header-gap);
  top: 0;
  z-index: var(--dg-z-header);
  border-radius: var(--dg-radius-xl);
  transition: top var(--dg-dur) var(--dg-ease),
    background-color var(--dg-dur) var(--dg-ease),
    border-radius var(--dg-dur) var(--dg-ease),
    transform var(--dg-dur) var(--dg-ease);
}

.dg-header.is-stuck {
  top: var(--dg-header-stick);
  background: var(--dg-bg);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.dg-header.is-hidden {
  transform: translateY(calc(-100% - var(--dg-header-stick)));
}

/* Tres colunas iguais nas pontas deixam a navegacao opticamente centrada,
   independente da largura dos grupos da esquerda e da direita. */
.dg-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--dg-space-4);
  height: var(--dg-header-h);
  width: min(100% - var(--dg-gutter) * 2, var(--dg-container-wide));
  margin-inline: auto;
  transition: height var(--dg-dur) var(--dg-ease);
}

.dg-header.is-stuck .dg-header__inner {
  height: var(--dg-header-h-compact);
}

@media (min-width: 1100px) {
  .dg-header__inner {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* Colunas explicitas: a navegacao some abaixo de 1100px e, sem posicao fixa,
   as acoes escorregariam para a coluna do meio. */
.dg-header__lead {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--dg-space-4);
}

/* Botao de quatro quadrados: abre o painel de navegacao em qualquer largura. */
.dg-grid-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--dg-radius-sm);
  color: var(--dg-text);
  transition: background-color var(--dg-dur-fast) var(--dg-ease),
    color var(--dg-dur-fast) var(--dg-ease);
}

.dg-grid-toggle:hover,
.dg-grid-toggle:focus-visible {
  background: var(--dg-surface-2);
}

.dg-grid-toggle svg {
  width: 20px;
  height: 20px;
}

.dg-grid-toggle[aria-expanded="true"] {
  background: var(--dg-bg-sunken);
}

.dg-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-3);
  flex: none;
  text-decoration: none;
  color: var(--dg-text);
}

/* No cabecalho aparece so o simbolo; o nome por extenso fica no hero e no
   rodape, onde ha espaco para ele respirar. */
.dg-brand__mark {
  width: clamp(30px, 2.6vw, 38px);
  height: auto;
  transition: width var(--dg-dur) var(--dg-ease);
}

.dg-header.is-stuck .dg-brand__mark {
  width: clamp(27px, 2.2vw, 33px);
}

/* --- Navegacao principal --- */
.dg-nav {
  grid-column: 2;
  justify-self: center;
}

.dg-nav__list {
  display: flex;
  align-items: center;
  gap: var(--dg-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 0.85em 1.25em;
  border-radius: var(--dg-radius-pill);
  font-size: var(--dg-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dg-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dg-dur-fast) var(--dg-ease),
    background-color var(--dg-dur-fast) var(--dg-ease);
}

.dg-nav__link:hover,
.dg-nav__link:focus-visible {
  color: var(--dg-text);
  background: var(--dg-surface-2);
}

/* A pagina atual fica em vermelho, como no site em WordPress. `--dg-red-ink`
   e a tinta vermelha do escopo: sobre o cabecalho escuro fica igual ao coral
   deles e, se um dia o cabecalho for claro, escurece sozinha para manter o
   minimo de contraste em texto de 14px. */
.dg-nav__link[aria-current="page"],
.dg-nav__link[aria-current="page"]:hover,
.dg-nav__link[aria-current="page"]:focus-visible {
  color: var(--dg-red-ink);
  background: transparent;
}

.dg-nav__caret {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform var(--dg-dur) var(--dg-ease);
}

.dg-nav__item--has-menu[data-open="true"] .dg-nav__caret {
  transform: rotate(180deg);
}

/* --- Mega menu --- */
.dg-nav__item--has-menu {
  position: relative;
}

.dg-megamenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: min(92vw, 720px);
  padding: var(--dg-space-5);
  border: 1px solid var(--dg-hairline);
  border-radius: var(--dg-radius-lg);
  background: color-mix(in srgb, var(--dg-bg-raised) 96%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--dg-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dg-dur) var(--dg-ease),
    transform var(--dg-dur) var(--dg-ease), visibility var(--dg-dur);
}

.dg-nav__item--has-menu[data-open="true"] .dg-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dg-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-megamenu__link {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--dg-space-3);
  align-items: start;
  padding: var(--dg-space-3);
  border-radius: var(--dg-radius);
  text-decoration: none;
  transition: background-color var(--dg-dur-fast) var(--dg-ease);
}

.dg-megamenu__link:hover,
.dg-megamenu__link:focus-visible {
  background: var(--dg-surface-2);
}

.dg-megamenu__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--dg-radius-sm);
  background: var(--dg-red-soft);
  color: var(--dg-red-ink);
}

.dg-megamenu__icon svg {
  width: 18px;
  height: 18px;
}

/* Os dois sao <span>: sem `block` o titulo e a descricao emendam na mesma
   linha sempre que sobra espaco. */
.dg-megamenu__title {
  display: block;
  font-family: var(--dg-font-display);
  font-size: var(--dg-fs-base);
  font-weight: 600;
  color: var(--dg-text);
}

.dg-megamenu__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--dg-fs-sm);
  line-height: 1.45;
  color: var(--dg-text-muted);
}

.dg-megamenu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-3);
  margin-top: var(--dg-space-4);
  padding-top: var(--dg-space-4);
  border-top: 1px solid var(--dg-hairline);
  font-size: var(--dg-fs-sm);
  color: var(--dg-text-muted);
}

/* --- Acoes do cabecalho --- */
.dg-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  flex: none;
}



/* Especificidade dobrada de proposito: `.dg-btn` e declarado mais adiante
   neste arquivo e venceria um seletor de classe unica. */
@media (max-width: 1099px) {
  .dg-header .dg-nav {
    display: none;
  }
}

@media (max-width: 719px) {
  .dg-header .dg-header__cta {
    display: none;
  }
}

/* --- Menu mobile (painel deslizante) --- */
.dg-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--dg-z-menu);
  display: grid;
  grid-template-rows: var(--dg-header-h) 1fr;
  background: var(--dg-bg-sunken);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity var(--dg-dur) var(--dg-ease),
    transform var(--dg-dur) var(--dg-ease), visibility var(--dg-dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dg-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dg-mobile-menu__body {
  padding: var(--dg-space-5) var(--dg-gutter) var(--dg-space-9);
}

.dg-mobile-menu__list {
  display: grid;
  gap: var(--dg-space-1);
  margin: 0 0 var(--dg-space-6);
  padding: 0;
  list-style: none;
}

.dg-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-3);
  padding: var(--dg-space-4) var(--dg-space-2);
  border-bottom: 1px solid var(--dg-hairline);
  font-family: var(--dg-font-display);
  font-size: var(--dg-fs-lg);
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
}

.dg-mobile-menu.is-open .dg-mobile-menu__link {
  animation: dg-menu-item-in 420ms var(--dg-ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes dg-menu-item-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dg-mobile-menu__sub {
  display: grid;
  gap: var(--dg-space-1);
  margin: var(--dg-space-2) 0 var(--dg-space-3) var(--dg-space-4);
  padding: 0;
  list-style: none;
}

.dg-mobile-menu__sub a {
  display: block;
  padding: var(--dg-space-2) 0;
  font-size: var(--dg-fs-sm);
  color: var(--dg-text-muted);
  text-decoration: none;
}

.dg-mobile-menu__sub a:hover {
  color: var(--dg-red-ink);
}

body.dg-no-scroll {
  overflow: hidden;
}

/* ==========================================================================
   3. Botoes
   ========================================================================== */
.dg-btn {
  --btn-bg: var(--dg-red-600);
  --btn-fg: #fff;
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dg-space-2);
  padding: 0.95em 1.7em;
  border: 1px solid var(--btn-border);
  border-radius: var(--dg-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--dg-font-body);
  font-size: var(--dg-fs-base);
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  /* Sem `nowrap`: um rotulo longo definiria a largura minima do bloco inteiro
     e estouraria o layout abaixo de ~360px. */
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dg-dur) var(--dg-ease-spring),
    box-shadow var(--dg-dur) var(--dg-ease), background-color var(--dg-dur) var(--dg-ease),
    color var(--dg-dur) var(--dg-ease), border-color var(--dg-dur) var(--dg-ease);
}

/* Brilho que atravessa o botao no hover. */
.dg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform var(--dg-dur-slow) var(--dg-ease);
}

.dg-btn:hover::before,
.dg-btn:focus-visible::before {
  transform: translateX(120%);
}

.dg-btn:hover,
.dg-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--dg-shadow-red);
}

.dg-btn:active {
  transform: translateY(0);
}

.dg-btn[disabled],
.dg-btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.dg-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--dg-text);
  --btn-border: var(--dg-hairline-strong);
}

/* Pilula com anel em degrade — o "Entre em Contato" do site em WordPress.
   Duas camadas de fundo (padding-box + border-box) so funcionariam com o
   preenchimento opaco; aqui o interior e translucido para a foto do hero
   aparecer, entao o anel vem de um pseudo-elemento mascarado: o degrade e
   recortado pela diferenca entre a caixa inteira e a caixa de conteudo,
   sobrando exatamente 2px de borda. */
.dg-btn--gradient {
  --btn-bg: rgba(23, 23, 23, 0.3);
  --btn-fg: var(--dg-paper);
  --btn-border: transparent;
  font-family: var(--dg-font-body);
  font-weight: 600;
  letter-spacing: normal;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.dg-btn--gradient::before {
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--dg-gradiente);
  transform: none;
  transition: opacity var(--dg-dur) var(--dg-ease);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.dg-btn--gradient:hover::before,
.dg-btn--gradient:focus-visible::before {
  transform: none;
}

.dg-btn--gradient:hover,
.dg-btn--gradient:focus-visible {
  box-shadow: 0 14px 34px -16px var(--dg-red-glow);
}

/* Chevron antes do rotulo, como nos botoes do tema. */
.dg-btn__chevron {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform var(--dg-dur) var(--dg-ease);
}

.dg-btn:hover .dg-btn__chevron {
  transform: translateX(3px);
}

.dg-btn--ghost:hover,
.dg-btn--ghost:focus-visible {
  --btn-border: var(--dg-red);
  --btn-fg: var(--dg-red-ink);
  box-shadow: none;
}




.dg-btn--lg {
  padding: 1.1em 2.1em;
  font-size: var(--dg-fs-base);
}

.dg-btn--block {
  width: 100%;
}

.dg-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dg-dur) var(--dg-ease);
}

.dg-btn:hover .dg-btn__icon {
  transform: translateX(3px);
}

/* Link com seta animada (alternativa textual ao botao). */
.dg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-2);
  font-family: var(--dg-font-display);
  font-size: var(--dg-fs-sm);
  font-weight: 600;
  color: var(--dg-red-ink);
  text-decoration: none;
}

.dg-link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dg-dur) var(--dg-ease);
}

.dg-link-arrow:hover svg,
.dg-link-arrow:focus-visible svg {
  transform: translateX(4px);
}

/* ==========================================================================
   4. Cartoes
   ========================================================================== */
.dg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-4);
  padding: var(--dg-space-6);
  border: 1px solid var(--dg-hairline);
  border-radius: var(--dg-radius-lg);
  background: var(--dg-surface);
  overflow: hidden;
  transition: transform var(--dg-dur) var(--dg-ease-out),
    border-color var(--dg-dur) var(--dg-ease), box-shadow var(--dg-dur) var(--dg-ease);
}

/* Halo que acompanha o cursor (coordenadas definidas em JS). */
.dg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    var(--dg-red-soft),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--dg-dur) var(--dg-ease);
  pointer-events: none;
}

.dg-card:hover {
  transform: translateY(-4px);
  border-color: var(--dg-hairline-strong);
  box-shadow: var(--dg-shadow);
}

.dg-card:hover::before {
  opacity: 1;
}


.dg-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--dg-radius);
  background: var(--dg-red-soft);
  color: var(--dg-red-ink);
  flex: none;
}

.dg-card__icon svg {
  width: 26px;
  height: 26px;
}

.dg-card__title {
  font-size: var(--dg-fs-lg);
}

.dg-card__text {
  color: var(--dg-text-muted);
  font-size: var(--dg-fs-sm);
  line-height: var(--dg-lh-loose);
}

.dg-card__list {
  display: grid;
  gap: var(--dg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dg-fs-sm);
  color: var(--dg-text-muted);
}

.dg-card__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--dg-space-2);
  align-items: start;
}

.dg-card__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--dg-red);
}

.dg-card__foot {
  margin-top: auto;
  padding-top: var(--dg-space-2);
}

/* Link dentro da lista de um cartao. */
.dg-card__list a {
  color: var(--dg-red-ink);
  text-decoration-color: color-mix(in srgb, var(--dg-red) 45%, transparent);
}

/* Cartao de contraponto: mesma estrutura, enfase neutra. Usado ao lado de um
   cartao afirmativo para que o par nao pareca ter o mesmo peso. */
.dg-card--quiet .dg-card__icon {
  background: color-mix(in srgb, var(--dg-text-faint) 14%, transparent);
  color: var(--dg-text-faint);
}

.dg-card--quiet .dg-card__list li::before {
  background: var(--dg-text-faint);
}

.dg-card--quiet::before {
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--dg-text-faint) 12%, transparent),
    transparent 62%
  );
}

/* Numeracao discreta no canto do cartao. */
.dg-card__num {
  position: absolute;
  top: var(--dg-space-5);
  right: var(--dg-space-5);
  font-family: var(--dg-font-mono);
  font-size: var(--dg-fs-xs);
  color: var(--dg-text-faint);
  letter-spacing: var(--dg-tracking-wide);
}

/* ==========================================================================
   5. Selos, tags e badges
   ========================================================================== */
.dg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 0.42em 0.9em;
  border: 1px solid var(--dg-hairline-strong);
  border-radius: var(--dg-radius-pill);
  font-size: var(--dg-fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--dg-text-muted);
  background: color-mix(in srgb, var(--dg-surface) 70%, transparent);
}

.dg-badge--red {
  border-color: color-mix(in srgb, var(--dg-red) 45%, transparent);
  color: var(--dg-red-ink);
  background: var(--dg-red-soft);
}

a.dg-badge {
  text-decoration: none;
  transition: color var(--dg-dur-fast) var(--dg-ease),
    border-color var(--dg-dur-fast) var(--dg-ease),
    background-color var(--dg-dur-fast) var(--dg-ease);
}

a.dg-badge:hover,
a.dg-badge:focus-visible {
  color: var(--dg-red-ink);
  border-color: color-mix(in srgb, var(--dg-red) 45%, transparent);
  background: var(--dg-red-soft);
}

.dg-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.dg-badge__dot--pulse {
  animation: dg-pulse 2s var(--dg-ease-in-out) infinite;
}

@keyframes dg-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--dg-red-glow);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 6px transparent;
  }
}

/* ==========================================================================
   6. Estatisticas / contadores
   ========================================================================== */
.dg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--dg-space-5);
  row-gap: var(--dg-space-8);
}

/* Com `auto-fit`, seis numeros viram quatro na primeira linha e dois na
   segunda, que fica pela metade. Tres colunas dao duas linhas cheias. O
   seletor le a propria contagem, entao continua certo se a lista mudar. */
@media (min-width: 1000px) {
  .dg-stats:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* O numeral e enorme e precisa caber na propria coluna, nao na janela: por
   isso a coluna vira o contêiner de consulta e o corpo e medido em `cqi`.
   A declaracao anterior e o retrocesso para quem nao suporta container
   queries — ali o numeral cresce com a janela, um pouco mais conservador. */
.dg-stat {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}

/* O numero e desenhado so em contorno e o rotulo passa por cima da metade de
   baixo dele — e essa sobreposicao que da a leitura do tema.
   `-webkit-text-stroke` nao aceita degrade. Duplicar o texto em pseudo-elementos
   daria um degrade de verdade, mas exigiria manter uma copia sincronizada com a
   animacao do contador em dois lugares (ui.js e tools/fix_counters.py) — uma
   fonte de erro silencioso. Em vez disso, cada coluna recebe um tom diferente
   da familia azul/coral: a 26% de opacidade a leitura e praticamente a mesma. */
.dg-stat__value {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.04em;
  font-family: var(--dg-font-display);
  font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
  font-size: clamp(2.6rem, 26cqi, 6.5rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  /* O contorno acompanha o corpo: 1,5px num numeral de 74px quase some. */
  -webkit-text-stroke: max(1.5px, 0.022em) var(--dg-stat-stroke, rgba(17, 17, 17, 0.3));
  user-select: none;
}

.dg-stat:nth-child(4n + 1) .dg-stat__value {
  --dg-stat-stroke: color-mix(in srgb, var(--dg-azul) 58%, transparent);
}

.dg-stat:nth-child(4n + 2) .dg-stat__value {
  --dg-stat-stroke: color-mix(in srgb, var(--dg-red) 58%, transparent);
}

.dg-stat:nth-child(4n + 3) .dg-stat__value {
  --dg-stat-stroke: color-mix(in srgb, var(--dg-azul) 44%, transparent);
}

.dg-invert .dg-stat__value {
  --dg-stat-stroke: rgba(255, 255, 255, 0.26);
}

.dg-invert .dg-stat:nth-child(4n + 1) .dg-stat__value {
  --dg-stat-stroke: color-mix(in srgb, var(--dg-azul-300) 46%, transparent);
}

.dg-invert .dg-stat:nth-child(4n + 2) .dg-stat__value {
  --dg-stat-stroke: color-mix(in srgb, var(--dg-red-300) 46%, transparent);
}

.dg-invert .dg-stat:nth-child(4n + 3) .dg-stat__value {
  --dg-stat-stroke: color-mix(in srgb, var(--dg-azul-300) 34%, transparent);
}

.dg-stat__suffix {
  font-size: 0.7em;
}

/* Sobe sobre o numero: a sobreposicao e o que caracteriza o bloco. */
.dg-stat__label {
  position: relative;
  margin-top: -0.2em;
  max-width: 26ch;
  font-family: var(--dg-font-display);
  font-size: var(--dg-fs-md);
  font-weight: 600;
  color: var(--dg-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   7. Marquee de logos
   ========================================================================== */
.dg-marquee {
  /* Caixa baixa de proposito: a altura limita so as marcas quase quadradas
     (Stara, Florense, Zeta Uno). Numa caixa alta elas ficavam com o dobro do
     corpo da Iveco, que e larga e baixa. */
  --dg-logo-w: clamp(130px, 14vw, 200px);
  --dg-logo-h: clamp(38px, 3.9vw, 56px);
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dg-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: dg-marquee var(--dg-marquee-dur, 38s) linear infinite;
}

.dg-marquee:hover .dg-marquee__track {
  animation-play-state: paused;
}

@keyframes dg-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Cada marca ocupa a mesma caixa, como no site publicado (la sao 230x124
   fixos). Sem isso o logotipo mais largo (Iveco, 480x78) aparece tres vezes
   maior que o mais estreito (Zeta Uno, cuja arte ocupa so 38% do PNG), e a
   faixa parece desalinhada. `contain` acerta os dois eixos de uma vez. */
.dg-marquee__item {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--dg-logo-w);
  height: var(--dg-logo-h);
}

/* A marca da Zeta Uno e vertical: o raio ocupa a altura toda e o nome fica
   embaixo dele, em corpo pequeno. Numa caixa da mesma altura das marcas
   deitadas ela sai com uns 30px de largura e o "ZETA UNO" vira um borrao.
   A caixa dela e a unica mais alta, e a largura acompanha para a arte nao
   encostar nas vizinhas.

   A redefinicao e das proprias variaveis, nao das declaracoes: `--dg-logo-h`
   e lida tambem pela regra da imagem, que vem depois desta e com a mesma
   especificidade — sobrescrever `max-height` aqui nao teria efeito. */
.dg-marquee__item--alto {
  --dg-logo-w: clamp(80px, 8.7vw, 124px);
  --dg-logo-h: clamp(72px, 7.4vw, 106px);
}

/* Os PNGs dos clientes sao artes claras, feitas para fundo escuro. Como a
   nossa pagina e clara, o tema claro inverte a arte por filtro — sai um
   cinza escuro, sem precisar de um segundo arquivo. Em painel escuro a arte
   original ja serve. */
.dg-marquee__item img {
  max-width: 100%;
  /* Em porcentagem a altura maxima nao resolve: a linha da grade e dimensionada
     pelo conteudo, entao `100%` fica circular e o navegador a ignora — o
     logotipo estourava a caixa para 92px de altura. Em unidade absoluta, nao. */
  max-height: var(--dg-logo-h);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(1) invert(1);
  transition: opacity var(--dg-dur) var(--dg-ease);
}

.dg-invert .dg-marquee__item img {
  filter: grayscale(1);
}

.dg-marquee__item:hover img {
  opacity: 1;
}

/* Sem o laco, a faixa vira uma grade centrada. A versao anterior deixava
   `overflow-x: auto`: o navegador desenhava uma barra de rolagem cinza
   atravessando os logotipos, e metade das marcas ficava fora da tela. */
@media (prefers-reduced-motion: reduce) {
  .dg-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }
  .dg-marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--dg-space-5);
    animation: none;
  }
}

/* ==========================================================================
   8. Timeline / processo
   ========================================================================== */
.dg-timeline {
  position: relative;
  display: grid;
  gap: var(--dg-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--dg-hairline);
}

/* Trilho preenchido conforme os itens entram em cena. Era um elemento proprio,
   mas `<ol>` so aceita `<li>` como filho — como pseudo-elemento o HTML fica
   valido e some um no da arvore de acessibilidade. O JS escreve `--p` no
   proprio `.dg-timeline`. */
.dg-timeline::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  width: 2px;
  height: calc(100% - 12px);
  background: linear-gradient(180deg, var(--dg-red), var(--dg-red-300));
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
  transition: transform var(--dg-dur-slow) var(--dg-ease-out);
  pointer-events: none;
}

.dg-timeline__item {
  position: relative;
  padding-left: calc(15px + var(--dg-space-6));
}

.dg-timeline__dot {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--dg-hairline-strong);
  background: var(--dg-bg);
  font-family: var(--dg-font-mono);
  font-size: 10px;
  color: var(--dg-text-faint);
  transition: border-color var(--dg-dur) var(--dg-ease),
    color var(--dg-dur) var(--dg-ease), background-color var(--dg-dur) var(--dg-ease);
}

.dg-timeline__item.is-active .dg-timeline__dot {
  border-color: var(--dg-red-ink);
  background: var(--dg-red);
  color: #fff;
}

.dg-timeline__title {
  font-size: var(--dg-fs-lg);
  margin-bottom: var(--dg-space-2);
}

.dg-timeline__text {
  color: var(--dg-text-muted);
  font-size: var(--dg-fs-sm);
  line-height: var(--dg-lh-loose);
  max-width: 60ch;
}


/* ==========================================================================
   9. Acordeao (FAQ)
   ========================================================================== */
/* No prototipo as perguntas nao sao cartoes: sao linhas numeradas separadas
   por fios, com o titulo grande e o sinal de abrir na ponta direita. */
.dg-accordion {
  display: grid;
  counter-reset: dg-faq;
}

.dg-accordion__item {
  border-top: 1px solid var(--dg-hairline);
  counter-increment: dg-faq;
}

.dg-accordion__item:last-child {
  border-bottom: 1px solid var(--dg-hairline);
}

.dg-accordion__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--dg-space-4);
  width: 100%;
  padding: var(--dg-space-6) 0;
  text-align: left;
  font-family: var(--dg-font-display);
  font-size: var(--dg-fs-lg);
  font-weight: 500;
  letter-spacing: var(--dg-tracking-tight);
  line-height: var(--dg-lh-snug);
  color: var(--dg-text);
  transition: color var(--dg-dur-fast) var(--dg-ease);
}

.dg-accordion__trigger::before {
  content: counter(dg-faq, decimal-leading-zero) ".";
  flex: none;
  color: var(--dg-text-faint);
  font-variant-numeric: tabular-nums;
}

.dg-accordion__trigger:hover,
.dg-accordion__trigger[aria-expanded="true"] {
  color: var(--dg-red-ink);
}

.dg-accordion__sign {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  margin-inline-start: auto;
  margin-top: 0.35em;
  color: var(--dg-red-ink);
}

.dg-accordion__sign::before,
.dg-accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dg-dur) var(--dg-ease);
}

.dg-accordion__sign::after {
  transform: rotate(90deg);
}

.dg-accordion__trigger[aria-expanded="true"] .dg-accordion__sign::after {
  transform: rotate(0deg);
}

.dg-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dg-dur-slow) var(--dg-ease-out);
}

.dg-accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.dg-accordion__panel > div {
  overflow: hidden;
}

.dg-accordion__body {
  padding: 0 0 var(--dg-space-6);
  color: var(--dg-text-muted);
  font-size: var(--dg-fs-base);
  line-height: var(--dg-lh-loose);
  max-width: 72ch;
}

/* ==========================================================================
   10. Formularios
   ========================================================================== */
.dg-form {
  display: grid;
  gap: var(--dg-space-5);
}

.dg-form__row {
  display: grid;
  gap: var(--dg-space-5);
}

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

.dg-field {
  display: grid;
  gap: var(--dg-space-2);
}

.dg-field__label {
  font-size: var(--dg-fs-sm);
  font-weight: 500;
  color: var(--dg-text);
}

.dg-field__req {
  color: var(--dg-red-ink);
}

.dg-field__hint {
  font-size: var(--dg-fs-xs);
  color: var(--dg-text-faint);
}

/* Campos apenas sublinhados, sem caixa — o formulario do prototipo. */
.dg-input,
.dg-textarea,
.dg-select {
  width: 100%;
  padding: 0.7em 0;
  border: 0;
  border-bottom: 1px solid var(--dg-hairline-strong);
  border-radius: 0;
  background: transparent;
  color: var(--dg-text);
  font-size: var(--dg-fs-base);
  transition: border-color var(--dg-dur-fast) var(--dg-ease),
    box-shadow var(--dg-dur-fast) var(--dg-ease);
}

.dg-input::placeholder,
.dg-textarea::placeholder {
  color: var(--dg-text-faint);
}

.dg-input:focus,
.dg-textarea:focus,
.dg-select:focus {
  outline: none;
  border-bottom-color: var(--dg-red-ink);
  box-shadow: 0 2px 0 -1px var(--dg-red-ink);
}

.dg-textarea {
  min-height: 130px;
  resize: vertical;
}

.dg-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a8acb4' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2em center;
  background-size: 12px;
  padding-right: 2em;
}

.dg-field[data-invalid="true"] .dg-input,
.dg-field[data-invalid="true"] .dg-textarea,
.dg-field[data-invalid="true"] .dg-select {
  border-bottom-color: var(--dg-err);
}

.dg-field__error {
  font-size: var(--dg-fs-xs);
  color: var(--dg-err);
  min-height: 1em;
}

.dg-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--dg-space-3);
  align-items: start;
  font-size: var(--dg-fs-sm);
  color: var(--dg-text-muted);
  line-height: 1.5;
  cursor: pointer;
}

.dg-check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--dg-red-ink);
}

/* Campo-armadilha para robos: fora da tela, mas nao `display:none`. */
.dg-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.dg-form__status {
  padding: var(--dg-space-4) var(--dg-space-5);
  border-radius: var(--dg-radius);
  border: 1px solid var(--dg-hairline-strong);
  font-size: var(--dg-fs-sm);
  line-height: 1.55;
}

.dg-form__status[data-state="ok"] {
  border-color: color-mix(in srgb, var(--dg-ok) 55%, transparent);
  background: color-mix(in srgb, var(--dg-ok) 12%, transparent);
  color: var(--dg-ok);
}

.dg-form__status[data-state="err"] {
  border-color: color-mix(in srgb, var(--dg-err) 55%, transparent);
  background: color-mix(in srgb, var(--dg-err) 12%, transparent);
  color: var(--dg-err);
}

.dg-form__status[data-state="busy"] {
  color: var(--dg-text-muted);
}

/* Spinner do botao de envio. */
/* ==========================================================================
   11. Rodape
   ========================================================================== */
.dg-footer {
  position: relative;
  padding-top: var(--dg-space-10);
  background: var(--dg-bg-sunken);
  color: var(--dg-text);
  overflow: hidden;
}

/* A frase grande em degrade que fecha o rodape no prototipo. */
.dg-footer__shout {
  margin-block: var(--dg-space-9) var(--dg-space-8);
  font-family: var(--dg-font-display);
  font-size: clamp(1.9rem, 0.9rem + 4.2vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--dg-tracking-tight);
  text-wrap: balance;
}

.dg-footer__grid {
  display: grid;
  gap: var(--dg-space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: var(--dg-space-8);
}

.dg-footer__brand {
  grid-column: span 1;
  max-width: 34ch;
}

@media (min-width: 900px) {
  .dg-footer__brand {
    grid-column: span 2;
  }
}

.dg-footer__logo {
  width: 168px;
  margin-bottom: var(--dg-space-4);
}

.dg-footer__title {
  font-family: var(--dg-font-display);
  font-size: var(--dg-fs-sm);
  font-weight: 600;
  letter-spacing: var(--dg-tracking-caps);
  text-transform: uppercase;
  color: var(--dg-text-faint);
  margin-bottom: var(--dg-space-4);
}

.dg-footer__list {
  display: grid;
  gap: var(--dg-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dg-fs-sm);
}

.dg-footer__list a {
  color: var(--dg-text-muted);
  text-decoration: none;
  transition: color var(--dg-dur-fast) var(--dg-ease);
}

.dg-footer__list a:hover,
.dg-footer__list a:focus-visible {
  color: var(--dg-red-ink);
}

.dg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-4);
  padding-block: var(--dg-space-5);
  border-top: 1px solid var(--dg-hairline);
  font-size: var(--dg-fs-xs);
  color: var(--dg-text-faint);
}

.dg-social {
  display: flex;
  gap: var(--dg-space-2);
}

.dg-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--dg-hairline);
  border-radius: 50%;
  color: var(--dg-text-muted);
  transition: color var(--dg-dur) var(--dg-ease), border-color var(--dg-dur) var(--dg-ease),
    transform var(--dg-dur) var(--dg-ease-spring);
}

.dg-social a:hover,
.dg-social a:focus-visible {
  color: var(--dg-red-ink);
  border-color: var(--dg-red-ink);
  transform: translateY(-3px);
}

.dg-social svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   12. Utilidades flutuantes
   ========================================================================== */
.dg-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--dg-z-sticky);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  /* Botao circular vermelho na borda direita, como no prototipo. */
  background: var(--dg-red-600);
  color: var(--dg-paper);
  box-shadow: var(--dg-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dg-dur) var(--dg-ease), transform var(--dg-dur) var(--dg-ease),
    visibility var(--dg-dur), border-color var(--dg-dur) var(--dg-ease);
}

.dg-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dg-to-top:hover {
  background: var(--dg-red-700);
}

.dg-to-top svg {
  width: 18px;
  height: 18px;
}

/* Botao flutuante do WhatsApp. */
/* Aparece so depois que o usuario rola: no topo ela cobriria o texto do hero. */
.dg-whats {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 58px);
  z-index: var(--dg-z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-3);
  padding: 0.7em 1.1em;
  border-radius: var(--dg-radius-pill);
  background: var(--dg-whatsapp);
  color: #fff;
  font-size: var(--dg-fs-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px var(--dg-whatsapp-glow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: transform var(--dg-dur) var(--dg-ease-spring),
    opacity var(--dg-dur) var(--dg-ease), visibility var(--dg-dur);
}

.dg-whats.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dg-whats.is-visible:hover,
.dg-whats.is-visible:focus-visible {
  transform: translateY(-3px);
}

/* Sem JS o botao nao receberia a classe: mantem visivel para nao sumir. */
.dg-no-js .dg-whats,
html:not(.dg-js) .dg-whats {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dg-whats svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.dg-whats__label {
  display: none;
}

@media (min-width: 640px) {
  .dg-whats__label {
    display: inline;
  }
}

/* ==========================================================================
   13. Lightbox da galeria
   ========================================================================== */
.dg-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--dg-z-overlay);
  display: grid;
  place-items: center;
  padding: var(--dg-space-6);
  background: rgba(6, 7, 8, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dg-dur) var(--dg-ease), visibility var(--dg-dur);
}

.dg-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.dg-lightbox__img {
  max-width: min(100%, 1200px);
  max-height: 80vh;
  width: auto;
  border-radius: var(--dg-radius);
  box-shadow: var(--dg-shadow-lg);
  transform: scale(0.96);
  transition: transform var(--dg-dur-slow) var(--dg-ease-out);
}

.dg-lightbox.is-open .dg-lightbox__img {
  transform: scale(1);
}

.dg-lightbox__caption {
  margin-top: var(--dg-space-4);
  text-align: center;
  font-size: var(--dg-fs-sm);
  color: var(--dg-text-muted);
}

.dg-lightbox__close,
.dg-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background-color var(--dg-dur) var(--dg-ease);
}

.dg-lightbox__close:hover,
.dg-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dg-lightbox__close {
  top: var(--dg-space-5);
  right: var(--dg-space-5);
}

.dg-lightbox__nav--prev {
  left: var(--dg-space-4);
  top: 50%;
  translate: 0 -50%;
}

.dg-lightbox__nav--next {
  right: var(--dg-space-4);
  top: 50%;
  translate: 0 -50%;
}

.dg-lightbox svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   14. Revelacao ao rolar
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms var(--dg-ease-out), transform 760ms var(--dg-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="left"] {
  transform: translateX(-28px);
}

[data-reveal="right"] {
  transform: translateX(28px);
}

[data-reveal="zoom"] {
  transform: scale(0.94);
}

/* Recorte que sobe, o mesmo gesto das keyframes `neurosClip*` do tema 17.
   Usado em foto e bloco grande, onde deslocar a caixa inteira ficaria pesado. */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--dg-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="clip"].is-in {
  clip-path: inset(0 0 0 0);
}

html:not(.dg-js) [data-reveal="clip"] {
  clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="clip"] {
    clip-path: none;
  }
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Sem JavaScript ninguem adiciona `.is-in`, e a pagina ficaria em branco.
   `boot.js` troca dg-no-js por dg-js antes da primeira pintura. */
html:not(.dg-js) [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   16. Camada de movimento  (ver assets/js/motion.js)
   ========================================================================== */

/* --- Titulo que entra letra a letra --------------------------------------- */
/* Reproduz a `neuros_heading_animation` do tema 17: a letra sobe de 120% ao
   mesmo tempo que aparece, com 20 ms de atraso entre uma e a seguinte (o
   atraso vem do JavaScript, letra a letra). A palavra e `inline-flex` para
   que as letras andem juntas e nunca quebrem no meio. Os dois elementos so
   existem depois que o JavaScript divide o texto: sem script o titulo ja
   esta pronto no HTML. */
.dg-w {
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* A palavra vira uma caixa indivisivel; sem estas duas linhas, uma palavra
     mais larga que a coluna ("Desenvolvimento" a 320px) seria cortada em vez
     de quebrar. Com `wrap` ela quebra entre letras, so quando nao couber. */
  flex-wrap: wrap;
  max-width: 100%;
}

.dg-l {
  display: inline-block;
  opacity: 0;
  transform: translateY(120%);
  white-space: pre;
}

[data-split].is-in .dg-l {
  animation: dg-letra-aparece 350ms forwards,
    dg-letra-sobe 700ms cubic-bezier(0.26, -0.14, 0, 1.01) forwards;
}

@keyframes dg-letra-aparece {
  to {
    opacity: 1;
  }
}

@keyframes dg-letra-sobe {
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dg-l {
    opacity: 1;
    transform: none;
  }
}

/* --- Palavra gigante vazada atras do titulo ------------------------------ */
/* Com `isolation: isolate` na secao, o z-index negativo pinta acima do fundo
   dela e abaixo do conteudo — exatamente onde a palavra precisa ficar. */
section:has(> .dg-ghost),
section:has(> .dg-aurora) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dg-ghost {
  position: absolute;
  /* Sobe o suficiente para sangrar pela borda da secao: encostada no topo
     ela cruzava o rotulo e a primeira linha do titulo, e as duas camadas de
     texto se liam como erro. */
  top: clamp(-3.5rem, -4vw, -1.5rem);
  inset-inline-end: -0.05em;
  z-index: -1;
  margin: 0;
  font-family: var(--dg-font-display);
  font-size: clamp(5rem, 19vw, 16rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dg-hairline-strong);
  pointer-events: none;
  user-select: none;
  transform: translateX(var(--ghost-x, 0));
  will-change: transform;
}

/* --- Brilho ambiente ----------------------------------------------------- */
.dg-aurora {
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  transform: translateY(var(--aurora-y, 0));
  will-change: transform;
}

.dg-aurora__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
}

.dg-aurora__blob--1 {
  top: 2%;
  inset-inline-start: -6%;
  width: clamp(280px, 40vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--dg-red) 20%, transparent), transparent 66%);
  animation: dg-drift-a 26s var(--dg-ease-in-out) infinite alternate;
}

.dg-aurora__blob--2 {
  bottom: -8%;
  inset-inline-end: -4%;
  width: clamp(260px, 36vw, 560px);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--dg-azul) 18%, transparent), transparent 66%);
  animation: dg-drift-b 31s var(--dg-ease-in-out) infinite alternate;
}

.dg-aurora__blob--3 {
  top: 34%;
  inset-inline-start: 46%;
  width: clamp(200px, 26vw, 420px);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--dg-red-300) 16%, transparent), transparent 68%);
  animation: dg-drift-c 37s var(--dg-ease-in-out) infinite alternate;
}

@keyframes dg-drift-a {
  to {
    transform: translate3d(8%, 10%, 0) scale(1.18);
  }
}

@keyframes dg-drift-b {
  to {
    transform: translate3d(-10%, -8%, 0) scale(1.12);
  }
}

@keyframes dg-drift-c {
  to {
    transform: translate3d(-14%, 12%, 0) scale(0.88);
  }
}

/* --- Botao que atrai o cursor -------------------------------------------- */
/* O deslocamento magnetico entra como variavel para conviver com o pequeno
   salto do hover, que continua sendo do CSS. */
.dg-btn {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
}

.dg-btn:hover,
.dg-btn:focus-visible {
  transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px));
}

.dg-btn:active {
  transform: translate(var(--mag-x, 0px), 0);
}

.dg-hero__arrow {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
  transition: background-color var(--dg-dur) var(--dg-ease),
    color var(--dg-dur) var(--dg-ease), transform var(--dg-dur-fast) var(--dg-ease);
}

/* --- Varredura do texto em degrade --------------------------------------- */
.dg-gradient-text {
  background-size: 220% 100%;
  animation: dg-sweep 9s var(--dg-ease-in-out) infinite alternate;
}

@keyframes dg-sweep {
  to {
    background-position: 100% 0;
  }
}

/* Sem a varredura, `220%` congela a frase no primeiro terco do degrade: ela
   sai azul e violeta, e o coral do fim nunca aparece. Voltando a `100%` o
   degrade inteiro cabe no texto de uma vez. */
@media (prefers-reduced-motion: reduce) {
  .dg-gradient-text {
    background-size: 100% 100%;
  }
}