/* ==========================================================================
   Digitalli - Reset, elementos base, layout e utilitarios
   ========================================================================== */

/* ---------- Reset ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ao pular para uma ancora o cabecalho ja esta compacto e sem a faixa de
     utilidades, entao a folga reservada e a altura compacta. */
  scroll-padding-top: calc(var(--dg-header-h-compact) + var(--dg-space-5));
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100svh;
  background: var(--dg-page);
  color: var(--dg-text);
  font-family: var(--dg-font-body);
  font-size: var(--dg-fs-base);
  line-height: var(--dg-lh-normal);
  /* O site em WordPress usa Manrope 500 no texto corrido, nao 400. */
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.22em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:target {
  scroll-margin-top: calc(var(--dg-header-h-compact) + var(--dg-space-5));
}

/* ---------- Tipografia ----------------------------------------------------- */
/* Como no prototipo, os titulos grandes sao de peso leve e bem justos; so os
   titulos pequenos, que competem com o corpo de texto, engrossam. */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--dg-font-display);
  font-weight: 600;
  line-height: var(--dg-lh-tight);
  letter-spacing: var(--dg-tracking-tight);
  text-wrap: balance;
}

h1,
h2 {
  font-weight: 400;
}

h3 {
  font-weight: 500;
}

h1 {
  font-size: var(--dg-fs-3xl);
}
h2 {
  font-size: var(--dg-fs-2xl);
}
h3 {
  font-size: var(--dg-fs-xl);
  line-height: var(--dg-lh-snug);
}
h4 {
  font-size: var(--dg-fs-lg);
  line-height: var(--dg-lh-snug);
}
h5 {
  font-size: var(--dg-fs-md);
  line-height: var(--dg-lh-snug);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
}

/* ---------- Acessibilidade -------------------------------------------------- */
.dg-skip {
  position: absolute;
  left: var(--dg-space-4);
  top: var(--dg-space-4);
  z-index: var(--dg-z-preloader);
  padding: var(--dg-space-3) var(--dg-space-5);
  background: var(--dg-red-600);
  color: #fff;
  font-weight: 600;
  border-radius: var(--dg-radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dg-dur) var(--dg-ease);
}

.dg-skip:focus-visible {
  transform: translateY(0);
}

.dg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--dg-focus);
  outline-offset: 3px;
  border-radius: var(--dg-radius-sm);
}

/* Remove o outline apenas de quem realmente recebe um estilo de foco proprio. */
.dg-btn:focus:not(:focus-visible),
.dg-nav__link:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Layout ---------------------------------------------------------- */
.dg-container {
  width: min(100% - var(--dg-gutter) * 2, var(--dg-container));
  margin-inline: auto;
}

.dg-container--wide {
  width: min(100% - var(--dg-gutter) * 2, var(--dg-container-wide));
}

.dg-container--narrow {
  width: min(100% - var(--dg-gutter) * 2, var(--dg-container-narrow));
}

/* ---------- Secoes -------------------------------------------------------- */
/* O site publicado nao usa casca em paineis: as secoes ocupam a largura toda e
   sao de canto vivo. O raio de 25px aparece so no cabecalho, nos cartoes e no
   menu deslizante. Por isso `--dg-shell-gap` e `--dg-shell-radius` ficam em
   zero — os tokens continuam existindo porque o hero e o cabecalho de pagina
   ainda os consultam para calcular altura. */

.dg-section {
  position: relative;
  padding-block: var(--dg-section-y);
  background: var(--dg-bg);
  color: var(--dg-text);
}

/* Trocar os tokens nao muda a cor do texto sozinho: `color` e herdado do
   `body` e continuaria valendo dentro do painel. Cada escopo precisa
   reafirmar a propria tinta. */
.dg-invert,
.dg-header,
.dg-hero,
.dg-page-head,
.dg-spotlight,
.dg-cta,
.dg-footer,
.dg-404,
.dg-mobile-menu,
.dg-lightbox,
.dg-preloader,
.dg-on-light {
  color: var(--dg-text);
}

.dg-section--tight {
  padding-block: calc(var(--dg-section-y) * 0.6);
}


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

.dg-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.dg-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}



.dg-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dg-space-3);
  align-items: center;
}

/* Linha de botoes/links de acao ao fim de um bloco de texto. */
.dg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dg-space-4);
  align-items: center;
  margin-top: var(--dg-space-7);
}

.dg-section-head--center .dg-actions,
.dg-cta__inner .dg-actions {
  justify-content: center;
}

/* ---------- Cabecalho de secao ---------------------------------------------- */
.dg-section-head {
  max-width: 62ch;
  margin-bottom: var(--dg-space-8);
}

/* `62ch` e medido na fonte do bloco (corpo, 16px) e da uns 560px: num titulo
   de 60px isso vira quatro linhas. No cabecalho centralizado o limite passa a
   ser medido no proprio titulo, onde 22ch rende duas ou tres linhas. */
.dg-section-head--center {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.dg-section-head--center > h2,
.dg-section-head--center > h1 {
  max-width: 22ch;
  margin-inline: auto;
}

/* Rotulo de secao como no site em WordPress: Manrope 14px peso 500, na mesma
   tinta do titulo. Sem caixa alta, sem barras, sem cor de acento — o protótipo
   do Figma usava `/ texto /`, mas o site publicado nao. */
.dg-eyebrow {
  display: block;
  margin-bottom: var(--dg-space-4);
  font-family: var(--dg-font-body);
  font-size: var(--dg-fs-sm);
  font-weight: 500;
  letter-spacing: normal;
  color: var(--dg-text);
}

.dg-section-head--center .dg-eyebrow {
  justify-content: center;
}

.dg-lead {
  margin-top: var(--dg-space-5);
  font-size: var(--dg-fs-md);
  color: var(--dg-text-muted);
  line-height: var(--dg-lh-loose);
  max-width: 62ch;
}

.dg-section-head--center .dg-lead {
  margin-inline: auto;
}

/* ---------- Utilitarios ------------------------------------------------------ */
.dg-text-muted {
  color: var(--dg-text-muted);
}


.dg-text-center {
  text-align: center;
}

.dg-mono {
  font-family: var(--dg-font-mono);
  font-size: var(--dg-fs-sm);
  letter-spacing: var(--dg-tracking-wide);
}



/* Texto com gradiente: azul -> violeta -> coral, o mesmo arco do titulo
   colorido no rodape do prototipo, aqui com as cores da marca. */
.dg-gradient-text {
  background: linear-gradient(100deg, var(--dg-azul-300) 4%, var(--dg-violeta) 48%, var(--dg-red-300) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Linha decorativa que separa blocos. */
.dg-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--dg-hairline-strong) 20%, var(--dg-hairline-strong) 80%, transparent);
  margin-block: var(--dg-space-8);
}

/* ---------- Barra de progresso de rolagem ------------------------------------ */
.dg-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: calc(var(--dg-z-header) + 1);
  background: linear-gradient(90deg, var(--dg-red), var(--dg-red-300));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Preferencia por menos movimento ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Impressao --------------------------------------------------------- */
@media print {
  .dg-header,
  .dg-footer,
  .dg-preloader,
  .dg-progress,
  .dg-to-top,
  .dg-circuit {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}