/* DRX 2.0 (D2) no blog estatico e nas ferramentas.
   Mesmos tokens de src/app/globals.css (fonte da verdade: app-e44/renderer/css/tokens.css):
   grafite monocromatico + um acento teal, acao principal chanfrada, rotulos em mono.
   Fontes locais (public/fonts): nada e pedido ao Google antes do consentimento. */

@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/geist-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url('/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url('/fonts/familjen-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --dx-bg-0: oklch(0.135 0.004 260);
  --dx-bg-1: oklch(0.165 0.004 260);
  --dx-bg-2: oklch(0.195 0.004 260);
  --dx-bg-3: oklch(0.235 0.004 260);
  --dx-bg-4: oklch(0.285 0.004 260);
  --dx-line-1: oklch(1 0 0 / 0.07);
  --dx-line-2: oklch(1 0 0 / 0.12);
  --dx-line-3: oklch(1 0 0 / 0.22);
  --dx-fg-1: oklch(0.965 0 0);
  --dx-fg-2: oklch(0.74 0.004 260);
  --dx-fg-3: oklch(0.63 0.004 260);
  --dx-fg-4: oklch(0.42 0.004 260);
  --dx-accent: oklch(0.79 0.15 170);
  --dx-accent-hover: oklch(0.86 0.13 170);
  --dx-accent-soft: oklch(0.79 0.15 170 / 0.14);
  --dx-on-accent: oklch(0.18 0.03 170);
  --dx-fio: oklch(0.79 0.15 170 / 0.32);
  --dx-sev-high: oklch(0.82 0.13 80);
  --dx-sev-high-soft: oklch(0.82 0.13 80 / 0.12);
  --dx-danger: oklch(0.68 0.19 25);
  --dx-font: 'Inter Variable', 'Segoe UI', system-ui, sans-serif;
  --dx-font-d: 'Familjen Grotesk', 'Inter Variable', 'Segoe UI', system-ui, sans-serif;
  --dx-mono: 'Geist Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --dx-cut: 11px;
  --dx-cut-sm: 9px;
  --dx-e-std: cubic-bezier(.2, 0, 0, 1);
  --dx-e-out: cubic-bezier(.22, 1, .36, 1);
  --dx-m-hover: 120ms;
  --dx-m-press: 80ms;
  /* nomes antigos, caso algum trecho inline ainda os use */
  --bg: var(--dx-bg-0); --bg2: var(--dx-bg-1); --bg3: var(--dx-bg-2);
  --text: var(--dx-fg-1); --muted: var(--dx-fg-2); --border: var(--dx-line-1);
  --cyan: var(--dx-accent); --green: var(--dx-accent); --red: var(--dx-danger);
}
@media (prefers-reduced-motion: reduce) { :root { --dx-m-hover: 0ms; --dx-m-press: 0ms; } }

*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;background:var(--dx-bg-0);scroll-padding-top:76px}
body{font-family:var(--dx-font);background:var(--dx-bg-0);color:var(--dx-fg-1);line-height:1.7;-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:clip}
a{color:var(--dx-accent);text-decoration:none;transition:color var(--dx-m-hover) var(--dx-e-std)}
a:hover{color:var(--dx-accent-hover)}
::selection{background:oklch(0.79 0.15 170 / 0.3);color:var(--dx-fg-1)}
:focus-visible{outline:2px solid var(--dx-accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.dx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Barra do topo: assinatura da marca (simbolo + DRX | OPTIMIZER) ── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 clamp(16px,4vw,40px);border-bottom:1px solid var(--dx-line-1);background:oklch(0.135 0.004 260 / 0.96)}
.topbar-logo{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--dx-fg-1);border-radius:6px}
.topbar-logo:hover{color:var(--dx-fg-1)}
.topbar-logo svg{display:block;flex:none}
.topbar-brand{display:block;flex:none;height:24px;width:auto}
.topbar-nav{display:flex;align-items:center;gap:22px;min-width:0;font-size:13.5px}
.topbar-nav a{color:var(--dx-fg-2);font-weight:500;white-space:nowrap}
.topbar-nav a:hover{color:var(--dx-fg-1)}
.topbar-nav a.is-current{color:var(--dx-fg-1)}

/* ── Botao chanfrado (acao principal) ── */
.topbar-nav a.topbar-cta,.cta-btn,.bl-btn,.bl-submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;background:var(--dx-accent);color:var(--dx-on-accent);font-family:var(--dx-font);font-weight:600;letter-spacing:.005em;white-space:nowrap;cursor:pointer;text-decoration:none;clip-path:polygon(0 0,calc(100% - var(--dx-cut)) 0,100% var(--dx-cut),100% 100%,0 100%);transition:background-color var(--dx-m-hover) var(--dx-e-std),transform var(--dx-m-press) var(--dx-e-std)}
.topbar-nav a.topbar-cta:hover,.cta-btn:hover,.bl-submit:hover,a:hover>.bl-btn{background:var(--dx-accent-hover);color:var(--dx-on-accent)}
.cta-btn:active,.bl-submit:active,.topbar-nav a.topbar-cta:active{transform:scale(.98)}
.topbar-nav a.topbar-cta{--dx-cut:var(--dx-cut-sm);height:34px;padding:0 14px;font-size:13.5px}
.cta-btn{height:48px;padding:0 24px;font-size:15px}
.cta-btn:focus-visible,.bl-submit:focus-visible,.topbar-nav a.topbar-cta:focus-visible{outline:2px solid var(--dx-on-accent);outline-offset:-5px}

/* ── Artigo ── */
.article{max-width:780px;margin:0 auto;padding:56px clamp(16px,4vw,24px) 72px}
.article-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;margin-bottom:18px;border-radius:999px;background:var(--dx-accent-soft);color:var(--dx-accent);font:500 11.5px/1 var(--dx-mono);letter-spacing:.06em;text-transform:uppercase}
.article h1{font:650 clamp(2rem,1.5rem + 2.2vw,3rem)/1.06 var(--dx-font-d);letter-spacing:-.024em;color:var(--dx-fg-1);margin-bottom:16px}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:40px;font:400 12px/1.5 var(--dx-mono);letter-spacing:.03em;color:var(--dx-fg-3)}
.article h2{font:650 clamp(1.35rem,1.2rem + .6vw,1.7rem)/1.2 var(--dx-font-d);letter-spacing:-.015em;color:var(--dx-fg-1);margin:48px 0 14px}
.article h3{font:600 1.12rem/1.3 var(--dx-font-d);color:var(--dx-fg-1);margin:30px 0 10px}
.article p{color:var(--dx-fg-2);font-size:16px;line-height:1.75;margin-bottom:18px}
.article strong{color:var(--dx-fg-1);font-weight:600}
.article ul,.article ol{color:var(--dx-fg-2);font-size:16px;line-height:1.75;margin:0 0 20px 22px}
.article li{margin-bottom:6px;padding-left:4px}
.article li::marker{color:var(--dx-fg-3)}
.article a{text-decoration:underline;text-decoration-color:oklch(0.79 0.15 170 / .4);text-underline-offset:3px}
.article a:hover{text-decoration-color:currentColor}
.article a.cta-btn{text-decoration:none}
.article code{font:400 .875em/1.5 var(--dx-mono);background:var(--dx-bg-2);border:1px solid var(--dx-line-1);padding:1px 6px;border-radius:5px;color:var(--dx-fg-1);overflow-wrap:anywhere}
.article pre{background:var(--dx-bg-1);border:1px solid var(--dx-line-1);border-radius:12px;padding:18px 20px;margin:16px 0 24px;overflow-x:auto;font:400 13.5px/1.7 var(--dx-mono);color:var(--dx-fg-1);tab-size:2}

/* Destaques: fundo tingido + contorno completo, sem borda lateral */
.tip-box,.warn-box{border-radius:12px;padding:16px 20px;margin:22px 0;font-size:15px;line-height:1.7;color:var(--dx-fg-1)}
.tip-box{background:var(--dx-accent-soft);border:1px solid var(--dx-fio)}
.tip-box strong{color:var(--dx-accent)}
.warn-box{background:var(--dx-sev-high-soft);border:1px solid oklch(0.82 0.13 80 / .28)}
.warn-box strong{color:var(--dx-sev-high)}
.tip-box code,.warn-box code{background:var(--dx-bg-1)}

.cta-box{margin:40px 0;padding:28px 30px;border-radius:14px;background:var(--dx-bg-1);box-shadow:inset 0 0 0 1px var(--dx-fio);text-align:left}
.cta-box h3{font:650 1.3rem/1.2 var(--dx-font-d);letter-spacing:-.012em;margin:0 0 8px;color:var(--dx-fg-1)}
.cta-box p{font-size:15px;color:var(--dx-fg-2);margin-bottom:20px}

.step{margin:12px 0;padding:18px 22px;border-radius:14px;background:var(--dx-bg-1);border:1px solid var(--dx-line-1)}
.step-num{margin-bottom:6px;font:500 11.5px/16px var(--dx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dx-accent)}
.step p{margin-bottom:0;font-size:15px}
.step p+p{margin-top:8px}

.faq-section{margin-top:56px;padding-top:36px;border-top:1px solid var(--dx-line-1)}
.faq-section h2{margin-top:0}
.faq-item{border-bottom:1px solid var(--dx-line-1);padding:16px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-weight:600;font-size:16px;line-height:1.45;color:var(--dx-fg-1)}
.faq-q::after{content:'+';flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--dx-line-2);color:var(--dx-fg-2);font:400 15px/1 var(--dx-mono)}
.faq-q:hover::after{border-color:var(--dx-line-3);color:var(--dx-fg-1)}
.faq-item.open .faq-q::after{content:'-';color:var(--dx-accent);border-color:var(--dx-fio)}
.faq-a{display:none;padding-top:10px;color:var(--dx-fg-2);font-size:15px;line-height:1.75}
.faq-item.open .faq-a{display:block}

.related{margin-top:48px;padding-top:36px;border-top:1px solid var(--dx-line-1)}
.related h2{margin:0 0 16px;font-size:1.25rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.related-card{border-radius:12px;background:var(--dx-bg-1);border:1px solid var(--dx-line-1);padding:14px 16px;font-size:14px;font-weight:600;line-height:1.45;transition:border-color var(--dx-m-hover) var(--dx-e-std),background-color var(--dx-m-hover) var(--dx-e-std)}
.related-card:hover{border-color:var(--dx-line-3);background:var(--dx-bg-2)}
.related-card a,.article .related-card a{color:var(--dx-fg-1);text-decoration:none}
.related-card a:hover{color:var(--dx-accent)}

/* ── Blocos depois do artigo (guia completo, checklist por e-mail, Discord) ── */
.bl-wrap{max-width:780px;margin:48px auto 0;padding:0 clamp(16px,4vw,24px)}
.bl-wrap--mid{margin-top:16px}
.bl-wrap--last{margin:16px auto 64px}
.bl-card,.bl-panel{display:block;border-radius:14px;background:var(--dx-bg-1);padding:26px 28px;color:inherit;text-decoration:none}
.bl-card{border:1px solid var(--dx-line-1);transition:border-color var(--dx-m-hover) var(--dx-e-std),background-color var(--dx-m-hover) var(--dx-e-std)}
.bl-card:hover{border-color:var(--dx-line-3);background:var(--dx-bg-2);color:inherit}
.bl-panel{box-shadow:inset 0 0 0 1px var(--dx-fio)}
.bl-kicker{margin-bottom:10px;font:500 11.5px/16px var(--dx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dx-accent)}
.bl-title{margin-bottom:8px;font:650 1.3rem/1.2 var(--dx-font-d);letter-spacing:-.012em;color:var(--dx-fg-1)}
.bl-title--lg{font-size:1.45rem}
.bl-desc{margin-bottom:18px;font-size:15px;line-height:1.7;color:var(--dx-fg-2)}
.bl-btn{--dx-cut:var(--dx-cut-sm);height:40px;padding:0 18px;font-size:14px}
.bl-form{display:flex;flex-wrap:wrap;gap:10px}
.bl-input{flex:1;min-width:min(100%,200px);height:46px;padding:0 14px;border-radius:10px;background:var(--dx-bg-0);border:1px solid var(--dx-line-2);color:var(--dx-fg-1);font:400 16px/1 var(--dx-font);transition:border-color var(--dx-m-hover) var(--dx-e-std)}
.bl-input::placeholder{color:var(--dx-fg-3)}
.bl-input:hover{border-color:var(--dx-line-3)}
.bl-input:focus{outline:none;border-color:var(--dx-accent);box-shadow:0 0 0 3px var(--dx-accent-soft)}
.bl-submit{height:46px;padding:0 22px;font-size:14.5px}
.bl-submit:disabled{cursor:default}
.bl-note{margin:10px 0 0;font-size:13px;color:var(--dx-fg-3)}
.bl-discord{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;background:var(--dx-bg-1);border:1px solid var(--dx-line-1);color:inherit;text-decoration:none;transition:border-color var(--dx-m-hover) var(--dx-e-std),background-color var(--dx-m-hover) var(--dx-e-std)}
.bl-discord:hover{border-color:var(--dx-line-3);background:var(--dx-bg-2);color:inherit}
.bl-discord-icon{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--dx-bg-3)}
.bl-grow{flex:1;min-width:0}
.bl-discord-title{margin-bottom:2px;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--dx-fg-1)}
.bl-discord-sub{font:400 12px/1.4 var(--dx-mono);color:var(--dx-fg-3);overflow-wrap:anywhere}
.bl-discord-btn{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--dx-line-3);color:var(--dx-fg-1);font-size:13px;font-weight:600;white-space:nowrap}
.bl-discord:hover .bl-discord-btn{background:var(--dx-bg-3)}

/* ── Indice do blog ── */
.container{max-width:1040px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.hero{padding:72px 0 48px}
.hero h1{font:650 clamp(2.2rem,1.5rem + 3vw,3.6rem)/1.02 var(--dx-font-d);letter-spacing:-.028em;color:var(--dx-fg-1);margin-bottom:16px}
.hero p{max-width:60ch;color:var(--dx-fg-2);font-size:clamp(1.02rem,1rem + .3vw,1.15rem);line-height:1.6}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;padding-bottom:80px}
.article-card{position:relative;display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:14px;background:var(--dx-bg-1);border:1px solid var(--dx-line-1);transition:border-color var(--dx-m-hover) var(--dx-e-std),background-color var(--dx-m-hover) var(--dx-e-std)}
.article-card:hover{border-color:var(--dx-line-3);background:var(--dx-bg-2)}
.article-card .article-tag{align-self:flex-start;margin-bottom:14px}
.article-card h2{font:600 1.15rem/1.3 var(--dx-font-d);letter-spacing:-.01em;margin-bottom:8px}
.article-card h2 a{color:var(--dx-fg-1)}
.article-card h2 a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.article-card h2 a:hover{color:var(--dx-fg-1)}
.article-card h2 a:focus-visible{outline:none}
.article-card:has(h2 a:focus-visible){outline:2px solid var(--dx-accent);outline-offset:3px}
.article-card p{flex:1;margin-bottom:14px;font-size:14.5px;line-height:1.6;color:var(--dx-fg-2)}
.article-card .article-meta{margin-bottom:0;font-size:11.5px}
.cta-section{padding:64px 0 80px;border-top:1px solid var(--dx-line-1)}
.cta-section h2{font:650 clamp(1.6rem,1.3rem + 1.4vw,2.3rem)/1.1 var(--dx-font-d);letter-spacing:-.02em;color:var(--dx-fg-1);margin-bottom:12px}
.cta-section p{max-width:60ch;color:var(--dx-fg-2);margin-bottom:28px;font-size:16px}

footer{padding:32px clamp(16px,4vw,24px);border-top:1px solid var(--dx-line-1);text-align:center;font:400 12.5px/1.6 var(--dx-mono);color:var(--dx-fg-3)}
footer a{color:var(--dx-fg-2);text-decoration:underline;text-decoration-color:var(--dx-line-3);text-underline-offset:3px}
footer a:hover{color:var(--dx-fg-1)}

@media(max-width:768px){
  .topbar-nav a:not(.topbar-cta){display:none}
  .article{padding:40px 16px 56px}
  .cta-box,.bl-card,.bl-panel{padding:22px 20px}
  .bl-submit{flex:1 1 100%}
  .bl-discord{flex-wrap:wrap}
  .hero{padding:48px 0 36px}
}
@media(max-width:420px){
  .topbar-brand{height:19px}
}
@media(max-width:380px){
  .cta-btn{white-space:normal;text-align:center;height:auto;min-height:48px;padding:12px 20px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}}

/* ── Download no post (blog-cta.js) ──
   Bloco logo depois da introducao, com o assunto do post; barra fina fixa no
   rodape quando o bloco sai da tela. Um acento teal, acao chanfrada. */
.dl-cta{display:grid;grid-template-columns:auto 1fr;gap:18px 20px;align-items:start;margin:32px 0 40px;padding:22px 24px;border-radius:14px;background:var(--dx-bg-1);box-shadow:inset 0 0 0 1px var(--dx-fio)}
.dl-cta__mark{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--dx-bg-2);box-shadow:inset 0 0 0 1px var(--dx-line-2)}
.dl-cta__mark img{width:22px;height:auto;display:block}
.article .dl-cta__label{font:500 11.5px/16px var(--dx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dx-fg-3);margin:0 0 6px}
.article .dl-cta__title{font:650 1.25rem/1.25 var(--dx-font-d);letter-spacing:-.012em;color:var(--dx-fg-1);margin:0 0 6px}
.article .dl-cta__desc{font-size:15px;line-height:1.6;color:var(--dx-fg-2);margin:0 0 14px}
.article .dl-cta__list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.article .dl-cta__list li{margin:0;padding:0 0 0 20px;position:relative;font-size:13.5px;color:var(--dx-fg-2);line-height:1.5}
.dl-cta__list li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:1.6px solid var(--dx-accent);border-bottom:1.6px solid var(--dx-accent);transform:rotate(-45deg)}
.dl-cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.dl-cta__note{font:400 12px/1.4 var(--dx-mono);color:var(--dx-fg-3)}
.article a.dl-cta__btn{height:46px;padding:0 22px;font-size:15px;text-decoration:none}
.dl-cta__btn .dl-arr{transition:transform 180ms var(--dx-e-out)}
.dl-cta__btn:hover .dl-arr{transform:translateY(2px)}
@media (max-width:560px){.dl-cta{grid-template-columns:1fr;padding:20px}.dl-cta__mark{display:none}.article a.dl-cta__btn{width:100%}}

.dl-bar{position:fixed;left:50%;bottom:16px;z-index:40;width:min(680px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;border-radius:14px;background:oklch(0.195 0.004 260 / .94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--dx-line-2),0 14px 36px oklch(0 0 0 / .45);transform:translate(-50%,calc(100% + 32px));opacity:0;pointer-events:none;transition:transform 320ms var(--dx-e-out),opacity 200ms var(--dx-e-std)}
.dl-bar.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.dl-bar__mark{width:20px;height:auto;flex:none}
.dl-bar__text{flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--dx-fg-1)}
.dl-bar__text span{display:block;font:400 12px/1.4 var(--dx-mono);color:var(--dx-fg-3)}
.dl-bar .cta-btn{height:40px;padding:0 16px;font-size:14px;--dx-cut:var(--dx-cut-sm)}
.dl-bar__close{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--dx-fg-3);cursor:pointer}
.dl-bar__close:hover{background:var(--dx-bg-3);color:var(--dx-fg-1)}
.dl-bar__close:focus-visible{outline:2px solid var(--dx-accent);outline-offset:1px}
/* abaixo de 900px o botao "Cookies" (consent.js, canto inferior esquerdo) cruzaria a barra */
@media (max-width:900px){.dl-bar{bottom:58px}}
@media (max-width:560px){.dl-bar{gap:10px;padding:8px 8px 8px 12px}.dl-bar__text span{display:none}.dl-bar__mark{display:none}}
@media (prefers-reduced-motion:reduce){.dl-bar{transition:none}}