/* ============================================================
Digifast — Hub de Tecnologia
Folha de estilo única, compartilhada pelas 5 páginas.
Origem: projeto Claude Design "Redesign site Digifast Premium".
============================================================ */
/* ------------------------------------------------------------
1. Tokens
O tema padrão é ESCURO. O modo claro entra por preferência de
sistema (quando o usuário não forçou "dark") ou por
[data-theme="light"] no , gravado em localStorage.
------------------------------------------------------------ */
:root {
--bg: #0C0C0D;
--bg2: #131315;
--hover: #191A1C;
--text: #F2EFEA;
--dim: rgba(242, 239, 234, .66);
--faint: rgba(242, 239, 234, .38);
--line: rgba(255, 255, 255, .10);
--soft: rgba(255, 255, 255, .06);
--accent: #F26B35;
--ink: var(--accent);
--onAccent: #0C0C0D;
--glow: rgba(242, 107, 53, .16);
--whiteLogo: block;
--colorLogo: none;
--sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
--display: 'Bricolage Grotesque', 'IBM Plex Sans', sans-serif;
--gutter: clamp(20px, 3.9vw, 56px);
--section-y: clamp(72px, 9vw, 120px);
--ease: cubic-bezier(.2, .7, .3, 1);
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #F4F2EE;
--bg2: #EAE7E1;
--hover: #FFFFFF;
--text: #16161A;
--dim: rgba(22, 22, 26, .70);
--faint: rgba(22, 22, 26, .45);
--line: rgba(22, 22, 26, .15);
--soft: rgba(22, 22, 26, .08);
--ink: color-mix(in oklch, var(--accent) 86%, #000);
--onAccent: #16161A;
--glow: rgba(242, 107, 53, .14);
--whiteLogo: none;
--colorLogo: block;
color-scheme: light;
}
}
:root[data-theme="light"] {
--bg: #F4F2EE;
--bg2: #EAE7E1;
--hover: #FFFFFF;
--text: #16161A;
--dim: rgba(22, 22, 26, .70);
--faint: rgba(22, 22, 26, .45);
--line: rgba(22, 22, 26, .15);
--soft: rgba(22, 22, 26, .08);
--ink: color-mix(in oklch, var(--accent) 86%, #000);
--onAccent: #16161A;
--glow: rgba(242, 107, 53, .14);
--whiteLogo: none;
--colorLogo: block;
color-scheme: light;
}
/* ------------------------------------------------------------
2. Base
------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
transition: background .35s ease, color .35s ease;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }
/* Os cards do Radar são flex/grid — [hidden] precisa vencer isso. */
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #0C0C0D; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.dg-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--accent);
color: #0C0C0D;
padding: 14px 20px;
font: 500 13px/1 var(--mono);
}
.dg-skip:focus { left: 0; color: #0C0C0D; }
.dg-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------
3. Layout
------------------------------------------------------------ */
.dg-wrap {
max-width: 1440px;
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.dg-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.dg-section--flush-b { padding-bottom: 0; }
.dg-section--flush-t { padding-top: 0; }
.dg-band {
background: var(--bg2);
border-top: 1px solid var(--soft);
border-bottom: 1px solid var(--soft);
}
.dg-rel { position: relative; overflow: hidden; }
/* Halo laranja difuso do topo das seções hero */
.dg-glow {
position: absolute;
top: 0; left: 0; right: 0;
height: 620px;
background: radial-gradient(120% 90% at var(--glow-x, 78%) 0%, var(--glow), transparent 62%);
pointer-events: none;
}
.dg-glow--bottom {
inset: 0;
height: auto;
background: radial-gradient(70% 100% at 50% 100%, var(--glow), transparent 70%);
}
/* Grade de linhas com o "sweep" laranja do hero da Home.
O espaçamento escala com a viewport para a grade sobreviver no celular —
esconder a grade apagaria junto a animação que mora dentro dela. */
.dg-lines {
--row: clamp(26px, 5.4vw, 41px);
--sweep-h: calc(var(--row) * 7 + 13px);
position: absolute;
top: clamp(84px, 9vw, 120px);
left: var(--gutter);
right: var(--gutter);
height: var(--sweep-h);
pointer-events: none;
opacity: .6;
}
.dg-lines span {
display: block;
height: 1px;
background: var(--soft);
margin-bottom: var(--row);
}
.dg-lines span:last-of-type { margin-bottom: 0; }
.dg-lines i {
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: dgSweep 7s ease-in-out infinite;
}
/* Colunas que colapsam sozinhas — o padrão do design inteiro */
.dg-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 380px)), 1fr));
gap: var(--gap, clamp(40px, 4.8vw, 80px));
}
.dg-cols--tight { --gap: clamp(32px, 3.6vw, 56px); }
.dg-cols--start { align-items: start; }
.dg-cols--center { align-items: center; }
/* ------------------------------------------------------------
4. Tipografia
O design entrega tamanhos fixos (86px, 78px, 66px…). Aqui eles
viram o TETO de um clamp(), para o site não estourar no celular.
Cada página define o teto via --h1 / --h2 inline.
------------------------------------------------------------ */
.dg-h1 {
margin: 0 0 32px;
font-family: var(--display);
font-weight: 800;
font-size: clamp(38px, 6.6vw, var(--h1, 80px));
line-height: .94;
letter-spacing: -.048em;
color: var(--text);
text-wrap: balance;
}
.dg-h2 {
margin: 0 0 24px;
font-family: var(--display);
font-weight: 800;
font-size: clamp(30px, 4.6vw, var(--h2, 54px));
line-height: .98;
letter-spacing: -.048em;
color: var(--text);
text-wrap: balance;
}
.dg-h3 {
margin: 0 0 8px;
font-family: var(--display);
font-weight: 600;
font-size: var(--h3, 21px);
line-height: 1.25;
letter-spacing: -.025em;
color: var(--text);
}
.dg-lead {
margin: 0 0 18px;
font: 300 clamp(16px, 1.3vw, 18px)/1.7 var(--sans);
color: var(--dim);
text-wrap: pretty;
}
.dg-lead--strong { font-weight: 400; color: var(--text); }
.dg-lead:last-child { margin-bottom: 0; }
.dg-body {
margin: 0;
font: 300 15px/1.65 var(--sans);
color: var(--dim);
}
.dg-eyebrow {
font: 400 10px/1 var(--mono);
letter-spacing: .24em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 20px;
}
.dg-badge {
display: flex;
align-items: center;
gap: 14px;
font: 400 11px/1 var(--mono);
letter-spacing: .24em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 34px;
}
.dg-badge b {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: dgBlink 2.4s ease-in-out infinite;
}
.dg-accent { color: var(--ink); }
.dg-meta {
font: 400 11px/1.5 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--faint);
}
.dg-proof {
display: flex;
flex-wrap: wrap;
gap: clamp(24px, 3.4vw, 56px);
margin-top: 44px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
/* ------------------------------------------------------------
5. Botões e links de ação
------------------------------------------------------------ */
.dg-btn {
display: inline-flex;
align-items: center;
gap: 14px;
flex: 0 0 auto;
white-space: nowrap;
background: var(--accent);
color: #0C0C0D;
border: 1px solid var(--accent);
padding: 20px 32px;
font: 600 clamp(14px, 1.1vw, 16px)/1 var(--display);
letter-spacing: -.01em;
border-radius: 2px;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.dg-btn:hover {
background: var(--text);
border-color: var(--text);
color: var(--bg);
transform: translateY(-2px);
}
.dg-btn[disabled] { opacity: .7; transform: none; cursor: default; }
/* Contorno — o CTA do header e os botões das marcas */
.dg-btn--ghost {
background: transparent;
border-color: var(--ink);
color: var(--ink);
padding: 15px 24px;
font: 500 13px/1 var(--mono);
letter-spacing: .04em;
}
.dg-btn--ghost:hover {
background: var(--accent);
border-color: var(--accent);
color: #0C0C0D;
transform: none;
}
.dg-btn--sm { padding: 12px 18px; font: 500 12px/1 var(--mono); letter-spacing: .05em; }
/* Sobre a faixa laranja do Manifesto */
.dg-btn--dark {
background: #0C0C0D;
border-color: #0C0C0D;
color: #F2EFEA;
}
.dg-btn--dark:hover { background: #F2EFEA; border-color: #F2EFEA; color: #0C0C0D; }
.dg-link {
flex: 0 0 auto;
font: 400 13px/1 var(--mono);
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 4px;
}
.dg-link--quiet { color: var(--dim); border-bottom-color: var(--line); }
/* ------------------------------------------------------------
6. Header
------------------------------------------------------------ */
.dg-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.dg-header__inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
row-gap: 14px;
column-gap: clamp(16px, 2.4vw, 40px);
padding: 18px var(--gutter);
}
.dg-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.dg-nav {
display: flex;
flex-wrap: wrap;
gap: clamp(14px, 1.8vw, 30px);
min-width: 0;
font: 500 14px/1 var(--display);
letter-spacing: -.01em;
color: var(--dim);
}
.dg-nav a[aria-current="page"] { color: var(--text); }
.dg-tools {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(10px, 1.2vw, 16px);
flex: 0 0 auto;
}
.dg-theme {
display: flex;
gap: 2px;
border: 1px solid var(--line);
border-radius: 2px;
padding: 2px;
}
.dg-theme button {
border: 0;
background: transparent;
color: var(--faint);
padding: 6px 9px;
font: 500 10px/1 var(--mono);
letter-spacing: .1em;
cursor: pointer;
border-radius: 1px;
transition: background .18s, color .18s;
}
.dg-theme button[aria-pressed="true"] { background: var(--soft); color: var(--text); }
.dg-lang {
display: flex;
align-items: center;
gap: 9px;
font: 400 11px/1 var(--mono);
letter-spacing: .12em;
color: var(--faint);
}
.dg-lang button {
border: 0;
background: transparent;
padding: 0 0 3px;
color: var(--faint);
cursor: pointer;
font: inherit;
border-bottom: 1px solid transparent;
transition: color .18s, border-color .18s;
}
.dg-lang button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--ink); }
/* ------------------------------------------------------------
7. Blocos de conteúdo
------------------------------------------------------------ */
/* Régua de 4 etapas do hero da Home / stats do Ecossistema */
.dg-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 240px)), 1fr));
}
.dg-strip > * { padding: 28px 32px 30px; border-right: 1px solid var(--line); }
.dg-strip > *:last-child { border-right: 0; }
.dg-strip__head {
display: flex;
justify-content: space-between;
font: 400 10px/1 var(--mono);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 16px;
}
.dg-bar { height: 2px; background: var(--soft); overflow: hidden; }
.dg-bar i {
display: block;
height: 100%;
background: var(--accent);
width: var(--w, 0%);
animation: dgFill 1.6s var(--d, 0s) var(--ease) both;
}
/* Classe explícita em vez de `.dg-strip p`: o seletor de elemento tinha
especificidade maior que .dg-stat / .dg-meta / .dg-strip__head e roubava
a fonte deles. */
.dg-strip__note { margin: 14px 0 0; font: 300 13px/1.5 var(--sans); color: var(--dim); }
.dg-stat {
font: 800 clamp(28px, 2.6vw, 34px)/1 var(--display);
letter-spacing: -.04em;
color: var(--text);
margin-bottom: 8px;
}
/* Grade de cards com fio de 1px entre eles.
O fio é o box-shadow de cada card, não o fundo do container: quando a
grade sobra uma célula vazia (3 cards em 2 colunas, por exemplo), não
fica um retângulo cinza órfão. As sombras vizinhas se encontram no gap
de 1px e leem como um traço único. */
.dg-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 300px)), 1fr));
gap: 1px;
}
.dg-tiles > * { box-shadow: 0 0 0 1px var(--line); }
.dg-tile {
background: var(--bg);
padding: 34px 30px 38px;
display: flex;
flex-direction: column;
gap: 20px;
transition: background .25s;
}
.dg-tile:hover { background: var(--bg2); color: inherit; }
.dg-band .dg-tile { background: var(--bg2); padding: 44px 36px 48px; }
.dg-band .dg-tile:hover { background: var(--hover); }
.dg-tile__brand { font: 800 clamp(26px, 2.4vw, 32px)/1 var(--display); letter-spacing: -.04em; color: var(--text); margin: 0 0 14px; }
.dg-tile__kicker {
font: 400 10px/1 var(--mono);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink);
}
.dg-tile__num {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.dg-tile__num b {
font: 800 clamp(36px, 3.6vw, 46px)/1 var(--display);
letter-spacing: -.05em;
color: var(--ink);
}
.dg-tile__foot { margin: auto 0 0; font: 300 14px/1.6 var(--sans); color: var(--dim); }
.dg-tile--note { justify-content: center; border-left: 2px solid var(--accent); }
.dg-track { height: 3px; background: var(--soft); }
.dg-track i { display: block; height: 100%; background: var(--accent); width: var(--w, 100%); }
/* Linhas numeradas (riscos, etapas, recusas) */
.dg-row {
border-top: 1px solid var(--line);
padding: 24px 0;
display: grid;
grid-template-columns: var(--idx, 56px) 1fr;
gap: clamp(16px, 1.6vw, 24px);
transition: background .2s;
}
.dg-row:last-of-type { border-bottom: 1px solid var(--line); }
.dg-row--hover:hover { background: var(--soft); }
.dg-row__idx { font: 400 12px/1.4 var(--mono); color: var(--ink); }
.dg-row p { margin: 0; font: 300 15px/1.6 var(--sans); color: var(--dim); }
/* Cabeçalho de seção com link à direita */
.dg-headrow {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 52px;
}
/* Faixa laranja sólida (alívio da Home, CTA do Manifesto) */
.dg-accent-band { background: var(--accent); color: #16161A; }
.dg-accent-band .dg-h2, .dg-accent-band .dg-quote { color: #0C0C0D; }
.dg-accent-band .dg-eyebrow { color: rgba(22, 22, 26, .55); }
.dg-accent-band .dg-lead { color: rgba(22, 22, 26, .78); font-weight: 400; }
.dg-quote {
margin: 0;
font: 600 clamp(26px, 3vw, 38px)/1.2 var(--display);
letter-spacing: -.035em;
color: rgba(12, 12, 13, .85);
text-wrap: balance;
}
/* Cartões de marca do Ecossistema */
.dg-brandrow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: clamp(36px, 4vw, 64px);
align-items: center;
padding: clamp(40px, 4.4vw, 56px) 0;
border-top: 1px solid var(--line);
}
.dg-brandrow:last-of-type { border-bottom: 1px solid var(--line); }
.dg-brandrow__media { position: relative; }
.dg-brandrow--flip .dg-brandrow__media { order: -1; }
.dg-brandrow__claim {
margin: 0 0 18px;
font: 600 clamp(20px, 1.9vw, 24px)/1.25 var(--display);
letter-spacing: -.03em;
color: var(--ink);
}
.dg-brandrow p.dg-lead { max-width: 480px; font-size: clamp(15px, 1.2vw, 17px); }
/* Logos que trocam com o tema.
Duas ![]()
reais — nunca filter:invert(). O par certo aparece via
--whiteLogo / --colorLogo, que mudam junto com o tema. */
.dg-logo { display: inline-flex; align-items: center; }
.dg-logo img { width: auto; height: 100%; object-fit: contain; }
.dg-logo img.is-white { display: var(--whiteLogo); }
.dg-logo img.is-color { display: var(--colorLogo); }
/* Placeholder de imagem — substitua por ![]()
quando a foto existir */
.dg-slot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 18px;
text-align: center;
background: var(--soft);
border: 1px dashed var(--line);
border-radius: var(--slot-radius, 4px);
aspect-ratio: var(--ratio, 4 / 3);
overflow: hidden;
}
.dg-slot figcaption {
font: 400 11px/1.6 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--faint);
max-width: 22ch;
}
.dg-slot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ------------------------------------------------------------
8. Diagnóstico (quiz da Home)
------------------------------------------------------------ */
.dg-score {
border: 1px solid var(--line);
padding: 28px 30px;
border-radius: 2px;
}
.dg-score__bar { height: 3px; background: var(--soft); margin-bottom: 16px; }
.dg-score__bar i {
display: block;
height: 100%;
width: 0%;
background: var(--accent);
transition: width .45s var(--ease);
}
.dg-score__text { font: 400 14px/1.5 var(--mono); color: var(--dim); }
.dg-q {
border-top: 1px solid var(--line);
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: clamp(16px, 2vw, 28px);
flex-wrap: wrap;
}
.dg-q:last-of-type { border-bottom: 1px solid var(--line); }
.dg-q > span { font: 300 clamp(15px, 1.3vw, 17px)/1.5 var(--sans); color: var(--text); max-width: 440px; }
.dg-q__opts { display: flex; gap: 8px; flex: 0 0 auto; }
.dg-q__opts button {
border: 1px solid var(--line);
background: transparent;
color: var(--dim);
padding: 9px 18px;
font: 400 12px/1 var(--mono);
letter-spacing: .08em;
cursor: pointer;
border-radius: 2px;
transition: background .18s, color .18s, border-color .18s;
}
.dg-q__opts button[aria-pressed="true"] {
background: var(--accent);
color: #0C0C0D;
border-color: var(--accent);
}
/* ------------------------------------------------------------
9. Radar — filtros e posts
------------------------------------------------------------ */
.dg-filters { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 8px; }
.dg-filters button {
border: 1px solid var(--line);
background: transparent;
color: var(--dim);
padding: 10px 18px;
font: 500 12px/1 var(--mono);
letter-spacing: .06em;
cursor: pointer;
border-radius: 2px;
transition: background .18s, color .18s, border-color .18s;
}
.dg-filters button[aria-pressed="true"] {
background: var(--accent);
color: #0C0C0D;
border-color: var(--accent);
}
.dg-feature {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: clamp(32px, 3.6vw, 56px);
align-items: center;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: clamp(32px, 3.4vw, 44px) 0;
transition: background .25s;
}
.dg-feature:hover { background: var(--soft); color: inherit; }
.dg-feature__meta {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
font: 400 10px/1 var(--mono);
letter-spacing: .2em;
text-transform: uppercase;
margin-bottom: 22px;
}
.dg-empty {
display: none;
padding: 64px 0;
text-align: center;
font: 400 13px/1 var(--mono);
letter-spacing: .08em;
color: var(--faint);
}
.dg-panel {
border: 1px solid var(--line);
padding: clamp(32px, 4vw, 56px) clamp(24px, 3.4vw, 56px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: clamp(32px, 3.6vw, 56px);
align-items: center;
}
/* ------------------------------------------------------------
10. Formulários
------------------------------------------------------------ */
.dg-form { display: flex; flex-direction: column; gap: 18px; }
.dg-form--inline { gap: 12px; }
.dg-field { display: flex; flex-direction: column; gap: 9px; }
.dg-field > span {
font: 400 10px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--faint);
}
.dg-input {
width: 100%;
min-width: 0;
background: transparent;
border: 1px solid var(--line);
color: var(--text);
padding: 15px 16px;
font: 400 15px/1.4 var(--sans);
border-radius: 2px;
outline: none;
transition: border-color .2s;
}
.dg-input:focus { border-color: var(--accent); }
.dg-input::placeholder { color: var(--faint); }
textarea.dg-input { resize: vertical; }
.dg-formnote { font: 400 12px/1.6 var(--mono); color: var(--faint); }
.dg-formnote[data-state="ok"], .dg-formnote[data-state="error"] { color: var(--ink); }
.dg-formcard {
border: 1px solid var(--line);
background: var(--bg2);
padding: clamp(24px, 2.6vw, 44px);
border-radius: 3px;
}
.dg-formcard__foot {
margin-top: 32px;
padding-top: 26px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 26px;
font: 400 13px/1.6 var(--sans);
color: var(--dim);
}
/* ------------------------------------------------------------
11. Footer
------------------------------------------------------------ */
.dg-footer { border-top: 1px solid var(--line); color: var(--dim); }
.dg-footer__inner {
max-width: 1440px;
margin: 0 auto;
padding: 70px var(--gutter) 36px;
}
.dg-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: clamp(36px, 4vw, 60px);
padding-bottom: 48px;
border-bottom: 1px solid var(--line);
}
.dg-footer__title {
font: 400 10px/1 var(--mono);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 20px;
}
.dg-footer__list {
display: flex;
flex-direction: column;
gap: 12px;
font: 300 15px/1.5 var(--sans);
}
.dg-footer__brands {
display: flex;
gap: 26px;
align-items: center;
flex-wrap: wrap;
opacity: .75;
}
.dg-footer__legal {
padding-top: 24px;
font: 400 11px/1 var(--mono);
letter-spacing: .1em;
color: var(--faint);
}
/* ------------------------------------------------------------
12. Animações
------------------------------------------------------------ */
@keyframes dgRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes dgFill { from { width: 0; } to { width: var(--w, 60%); } }
@keyframes dgBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* translateY lê --sweep-h (herdado de .dg-lines), então o fio percorre a
grade inteira em qualquer tamanho de tela. */
@keyframes dgSweep {
0% { transform: translateY(0); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateY(var(--sweep-h, 300px)); opacity: 0; }
}
.dg-rise { animation: dgRise .8s var(--ease) both; }
/* O JS marca .is-armed antes de observar; sem JS nada fica escondido. */
[data-reveal].is-armed {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
[data-reveal].is-armed { opacity: 1; transform: none; }
}
/* ------------------------------------------------------------
13. Ajustes de tela pequena
------------------------------------------------------------ */
@media (max-width: 720px) {
.dg-header__inner { justify-content: center; }
.dg-nav { order: 3; width: 100%; justify-content: center; }
/* .dg-tools é flex:0 0 auto, então nunca quebra sozinho: o conteúdo fica
mais largo que a tela e o justify-content:center o empurra para fora dos
dois lados. Forçar a linha inteira devolve a quebra interna. */
.dg-tools { flex: 1 1 100%; justify-content: center; }
.dg-strip > * { border-right: 0; border-bottom: 1px solid var(--line); }
.dg-strip > *:last-child { border-bottom: 0; }
.dg-q { justify-content: flex-start; }
}