/* ============================================================
   PÁGINAS NOVAS: abas do Eu, Coleção, Atlas, subnav, Jardim
   Os dois estilos (fino e clássico) usam as mesmas variáveis.
   ============================================================ */
:root { --pg-linha: var(--tinta); --pg-r: 0px; --pg-fundo: var(--cartao, var(--papel)); --pg-suave: color-mix(in srgb, var(--tinta) 14%, transparent); }
:root[data-estilo="fino"] { --pg-linha: var(--linha-2); --pg-r: var(--r-s, 9px); --pg-suave: var(--linha); }

/* ---------- Eu: cabeçalho de perfil (22/set/2026 — "diagrame melhor, capriche") ---------- */
.eu-hero { display: flex; align-items: flex-start; gap: 1.1rem; margin-top: .6rem; }
.eu-avatar {
  flex: 0 0 auto; width: 5.4rem; height: 5.4rem; border-radius: var(--raio-c, 50%);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--sinal) 14%, var(--pg-fundo));
  border: 2px solid var(--sinal); color: var(--sinal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sinal) 10%, transparent);
}
.eu-avatar svg { width: 2.6rem; height: 2.6rem; }
.eu-hero-texto { min-width: 0; padding-top: .2rem; }
.eu-nome { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1 var(--f-display); margin: 0 0 .3rem; letter-spacing: -.01em; }
@media (max-width: 560px) { .eu-hero { gap: .8rem; } .eu-avatar { width: 4rem; height: 4rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sinal) 10%, transparent); } .eu-avatar svg { width: 2rem; height: 2rem; } }

/* ---------- Eu: faixa de números sempre visível (perfil "de rede social": os números aparecem sem precisar abrir aba) ---------- */
.eu-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 0; margin: .9rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--pg-suave, var(--linha)); font: 500 .82rem var(--f-mono); color: var(--suave); }
.eu-stats span { position: relative; padding: 0 .9rem; }
.eu-stats span:first-child { padding-left: 0; }
.eu-stats span:not(:first-child)::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 1px; background: var(--linha-2); }
.eu-stats b { color: var(--tinta); font-weight: 700; font-size: 1.05em; }
.eu-stats a { color: var(--sinal); text-decoration: none; }
.eu-stats a:hover { text-decoration: underline; }
@media (max-width: 560px) { .eu-stats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .eu-stats::-webkit-scrollbar { display: none; } .eu-stats span { white-space: nowrap; } }

/* ---------- Eu: abas ---------- */
.eu-nav { gap: .35rem; margin-top: 1.2rem; }
.eu-aba[hidden] { display: none; }
.eu-aba > .eu-sec:first-child { margin-top: var(--g); }
:root[data-estilo="fino"] .eu-nav { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--linha-2); border-radius: var(--raio-p, 999px); }
:root[data-estilo="fino"] .eu-nav a { border: 0; border-radius: var(--raio-p, 999px); padding: .5rem 1rem; font: 500 .875rem/1 var(--f-display); text-transform: none; letter-spacing: 0; color: var(--suave); transition: background .2s var(--ease), color .2s var(--ease); }
:root[data-estilo="fino"] .eu-nav a:hover { background: var(--linha); color: var(--tinta); }
.eu-nav a[aria-current="page"], :root[data-estilo="fino"] .eu-nav a[aria-current="page"] { background: var(--tinta); color: var(--papel); }

@media (max-width: 640px) {
  :root[data-estilo="fino"] .eu-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  :root[data-estilo="fino"] .eu-nav::-webkit-scrollbar { display: none; }
  :root[data-estilo="fino"] .eu-nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- fichas em pílulas (Coleção) ---------- */
.chip .q { width: .55rem; height: .55rem; border-radius: var(--raio-c, 50%); background: var(--c, var(--sinal)); flex-shrink: 0; }
.chip svg { width: .9rem; height: .9rem; }
.chip.pequeno { padding: .35rem .7rem; font-size: .72rem; }
:root[data-estilo="fino"] .chip { border: 1px solid var(--linha-2); border-radius: var(--raio-p, 999px); background: transparent; color: var(--tinta); text-transform: none; letter-spacing: 0; font: 500 .8125rem/1 var(--f-display); padding: .5rem .85rem; transition: background .2s var(--ease), color .2s var(--ease); }
:root[data-estilo="fino"] .chip.pequeno { padding: .38rem .75rem; font-size: .75rem; }
:root[data-estilo="fino"] .chip:hover { background: var(--linha); }
:root[data-estilo="fino"] .chip.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ---------- Coleção ---------- */
.col-livros-grade { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1.1rem; }
.col-livro-mini { --cor: #8a7a5e; flex: 0 0 6.4rem; width: 6.4rem; height: 8.6rem; border-radius: .5rem; padding: .55rem .5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; text-decoration: none; background: linear-gradient(165deg, var(--cor), color-mix(in srgb, var(--cor) 70%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .15s ease; }
.col-livro-mini:hover { transform: translateY(-3px); }
.col-livro-mini b { font: 700 .72rem/1.15 var(--f-titulo, var(--f-display)); color: #fff9ec; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.col-livro-mini span { font: 500 .62rem var(--f-mono, monospace); color: rgba(255, 249, 236, .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-livro-mais { flex: 0 0 6.4rem; width: 6.4rem; height: 8.6rem; border-radius: .5rem; border: 1px dashed var(--pg-linha); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-decoration: none; color: var(--tinta); font: 700 1.1rem var(--f-titulo, var(--f-display)); }
.col-livro-mais small { font: 500 .62rem var(--f-mono, monospace); color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }

.col-prat, .col-subs, .col-st-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.col-prat { margin: 1.1rem 0 .6rem; }
.col-subs { margin: 0 0 .5rem; }
.col-filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin: .9rem 0 1.1rem; }
.col-busca { min-width: min(17rem, 100%); font: 400 1rem/1.3 var(--f-texto); padding: .55rem .9rem; border: 1px solid var(--pg-linha); background: transparent; color: var(--tinta); }
:root[data-estilo="fino"] .col-busca { border-radius: var(--raio-p, 999px); }
.cx.col-como { margin: 1rem 0; padding: .8rem 1.1rem; }
.col-como summary { cursor: pointer; font: 500 .6875rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.col-como ol { margin: .9rem 0 0; padding-left: 1.2rem; display: grid; gap: .6rem; max-width: 70ch; }
.col-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--g, 1rem); }
.col-item { display: grid; gap: .45rem; align-content: start; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--pg-linha); border-top: 4px solid var(--c, var(--tinta)); border-radius: var(--pg-r); background: var(--pg-fundo); }
.col-item > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.col-item .h3 { font: 500 1.15rem/1.25 var(--f-display); text-transform: none; letter-spacing: 0; font-stretch: 100%; overflow-wrap: anywhere; }
.col-por { color: var(--suave); font-size: .95rem; }
.col-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.col-n { color: var(--sinal); letter-spacing: .08em; font-size: .9rem; }
.col-st { border: 1px solid var(--pg-linha); border-radius: var(--raio-p, 999px); padding: .22rem .7rem; font: 500 .72rem/1 var(--f-display); background: transparent; color: var(--tinta); cursor: pointer; }
.col-st.agora { background: color-mix(in srgb, var(--sinal) 25%, transparent); border-color: var(--sinal); }
.col-st.feito { background: var(--c, var(--tinta)); color: var(--fixa, #fff); border-color: transparent; }
.col-fav { width: 2rem; height: 2rem; border-radius: var(--raio-c, 50%); border: 1px solid var(--pg-linha); background: transparent; color: var(--suave); display: grid; place-items: center; cursor: pointer; padding: 0; }
.col-fav svg { width: 1rem; height: 1rem; }
.col-fav[aria-pressed="true"] { color: var(--sinal); border-color: var(--sinal); }
.col-fav[aria-pressed="true"] svg { fill: currentColor; }
.col-item .md { font-size: .98rem; }
.col-item .acoes { margin-top: .3rem; }
.col-vazio { margin: 1rem 0; }
.col-import { margin: 1rem 0; border-left: 4px solid var(--sinal); }
.col-sub-h { margin-top: calc(var(--g, 1rem) * 2); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--pg-linha); padding-bottom: .5rem; margin-bottom: 1rem; }
.col-fig-n { margin-bottom: .8rem; }
.col-fig-n b { color: var(--tinta); }
.fig-g { border: 1px solid var(--pg-linha); border-radius: var(--pg-r); margin-bottom: .6rem; background: var(--pg-fundo); }
.fig-g > summary { display: grid; grid-template-columns: auto 1fr auto 6rem; align-items: center; gap: .7rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.fig-g > summary::-webkit-details-marker { display: none; }
.fig-g > summary .q { width: .7rem; height: .7rem; border-radius: var(--raio-c, 50%); background: var(--c); }
.fig-b { height: 5px; background: var(--pg-suave); border-radius: var(--raio, 3px); overflow: hidden; }
.fig-b i { display: block; height: 100%; background: var(--c); transition: width .4s var(--ease); }
.fig-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; padding: .3rem 1rem 1rem; }
.fig { position: relative; border: 1px solid var(--pg-linha); border-radius: var(--pg-r); transition: background .2s var(--ease), border-color .2s var(--ease); }
.fig a { display: grid; gap: .2rem; align-content: start; padding: .55rem 1.6rem .6rem .6rem; text-decoration: none; color: inherit; min-height: 4.2rem; }
.fig a b { font: 600 .7rem/1 var(--f-mono); color: var(--suave); }
.fig a span { font: 500 .8125rem/1.25 var(--f-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fig-x { position: absolute; top: .4rem; right: .4rem; width: 1.15rem; height: 1.15rem; border-radius: var(--raio-c, 50%); border: 1.5px solid var(--pg-linha); background: transparent; cursor: pointer; padding: 0; }
.fig-x::after { content: ""; position: absolute; left: 50%; top: 45%; width: .3rem; height: .55rem; border: solid var(--fixa, #fff); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; }
.fig.on { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); }
.fig.on .fig-x { background: var(--c); border-color: var(--c); }
.fig.on .fig-x::after { opacity: 1; }
@media (max-width: 600px) {
  .col-grade { grid-template-columns: 1fr; }
  .fig-g > summary { grid-template-columns: auto 1fr auto; }
  .fig-g > summary .fig-b { display: none; }
}

/* ---------- Atlas (hub) e subnav ---------- */
.atlas-busca { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; max-width: 40rem; }
.atlas-busca input { flex: 1; min-width: min(16rem, 100%); font: 400 1.05rem/1.3 var(--f-texto); padding: .7rem 1rem; border: 1px solid var(--pg-linha); background: transparent; color: var(--tinta); }
:root[data-estilo="fino"] .atlas-busca input { border-radius: var(--raio-p, 999px); }
.atlas-perg { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--g, 1rem); margin-top: var(--g, 1rem); }
.cx.ap { display: grid; gap: .5rem; align-content: start; text-decoration: none; color: inherit; transition: transform .25s var(--ease), border-color .25s var(--ease); }
.cx.ap:hover { transform: translateY(-3px); border-color: var(--sinal); }
.ap-n { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-titulo, var(--f-display)); letter-spacing: -.03em; }
.ap span { color: var(--suave); line-height: 1.35; }
.ap em { font-style: normal; font: 500 .8125rem/1 var(--f-display); color: var(--sinal); margin-top: .3rem; }
.atlas-sec { margin-top: calc(var(--g, 1rem) * 2.4); }
.atlas-sec > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--pg-linha); padding-bottom: .6rem; margin-bottom: var(--g, 1rem); }
.atlas-eras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.era { position: relative; display: grid; gap: .3rem; align-content: end; min-height: 12rem; padding: .9rem 1rem; border: 1px solid var(--pg-linha); border-radius: var(--pg-r); text-decoration: none; color: inherit; overflow: hidden; background: var(--pg-fundo); transition: transform .25s var(--ease), border-color .25s var(--ease); }
.era::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: color-mix(in srgb, var(--sinal) 10%, transparent); transition: height .5s var(--ease); z-index: 0; }
.era > * { position: relative; z-index: 1; }
.era:hover { transform: translateY(-3px); border-color: var(--sinal); }
.era-n { font: 600 .72rem/1 var(--f-mono); color: var(--suave); }
.era b { font: 500 1rem/1.2 var(--f-display); text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.era-b { display: flex; height: 6px; border-radius: var(--raio, 3px); overflow: hidden; gap: 1px; margin-top: .3rem; }
.era-b i { background: var(--c); min-width: 3px; }
.era-c { font: 500 .72rem/1 var(--f-mono); color: var(--suave); }
.atlas-acervo { margin-bottom: 1.4rem; }
.atlas-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; margin-top: .6rem; }
.at-tile { position: relative; display: grid; grid-template-rows: 6.5rem auto; border: 1px solid var(--pg-linha); border-radius: var(--pg-r); overflow: hidden; text-decoration: none; color: inherit; background: var(--pg-fundo); transition: transform .25s var(--ease), border-color .25s var(--ease); }
.at-tile:not(:has(img)) { grid-template-rows: auto; border-top: 4px solid var(--c, var(--tinta)); }
.at-tile:hover { transform: translateY(-3px); border-color: var(--c, var(--sinal)); }
.at-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.at-t { display: grid; gap: .25rem; padding: .7rem .9rem .8rem; border-top: 3px solid var(--c, var(--tinta)); }
.at-t b { font: 500 .98rem/1.2 var(--f-display); text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.atlas-falta { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--g, 1rem); }
.at-proximo { grid-column: 1 / -1; border-left: 4px solid var(--sinal); }
.at-proximo .h3 { margin: .3rem 0 .5rem; }
.at-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.at-chips .chip-h { display: inline-flex; gap: .4rem; align-items: baseline; }
.at-curtas { list-style: none; padding: 0; margin: .6rem 0 .8rem; display: grid; gap: .55rem; }
.at-curtas a { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; text-decoration: none; color: inherit; }
.at-b { grid-column: 1 / -1; height: 4px; background: var(--pg-suave); border-radius: var(--raio, 2px); overflow: hidden; }
.at-b i { display: block; height: 100%; background: var(--sinal); }

/* subnav: as perguntas dentro do Atlas */
.subnav { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.subnav a { display: grid; gap: .1rem; padding: .5rem .9rem; border: 1px solid var(--pg-linha); border-radius: var(--pg-r); text-decoration: none; color: var(--suave); min-width: 7.5rem; transition: background .2s var(--ease), color .2s var(--ease); }
.subnav a b { font: 600 .9rem/1.1 var(--f-display); text-transform: none; letter-spacing: 0; font-stretch: 100%; color: inherit; }
.subnav a span { font: 500 .625rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.subnav a:hover { background: var(--pg-suave); color: var(--tinta); }
.subnav a[aria-current="page"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
:root[data-estilo="fino"] .subnav { padding: 3px; border: 1px solid var(--linha-2); border-radius: var(--raio-p, 999px); display: inline-flex; }
:root[data-estilo="fino"] .subnav a { border: 0; border-radius: var(--raio-p, 999px); padding: .5rem 1.1rem; }
@media (max-width: 600px) { .atlas-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .subnav a { min-width: 0; } }

/* ---------- Meu dia (na página Agora) ---------- */
.ag-dia summary { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ad-n { font: 600 .75rem/1 var(--f-mono); color: var(--tinta); letter-spacing: 0; }
.ad-regra { margin: .9rem 0 .2rem; font: 400 .92rem/1.4 var(--f-texto); color: var(--suave); }
.ad-lista { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .9rem; }
.ag-dia .ad-lista li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .8rem; align-items: start; padding-bottom: .9rem; border-bottom: 1px solid var(--pg-suave); }
.ad-ck { width: 1.6rem; height: 1.6rem; border-radius: var(--raio-c, 50%); border: 1.5px solid var(--pg-linha); background: transparent; cursor: pointer; padding: 0; position: relative; margin-top: .1rem; transition: background .2s var(--ease), border-color .2s var(--ease); }
.ad-ck::after { content: ""; position: absolute; left: 50%; top: 45%; width: .36rem; height: .66rem; border: solid var(--fixa, #fff); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; }
.ad-ck[aria-pressed="true"] { background: var(--sinal); border-color: var(--sinal); }
.ad-ck[aria-pressed="true"]::after { opacity: 1; }
.ag-dia li.on .ad-t { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.ad-t { font-size: 1.02rem; line-height: 1.35; margin-top: .1rem; }
.ad-l { font: 400 .84rem/1.4 var(--f-texto); color: var(--suave); margin-top: .2rem; }
.ad-l a { color: var(--sinal); }
.ad-cron { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.ad-cron-t { font: 600 .95rem/1 var(--f-mono); min-width: 3.4rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ad-cron-b { border: 1px solid var(--pg-linha); background: transparent; color: var(--tinta); padding: .3rem .7rem; border-radius: var(--raio-p, 999px); font: 500 .7rem var(--f-display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.ad-cron-b.leve { border-color: transparent; color: var(--suave); padding-inline: .4rem; }
.ad-cron.rodando .ad-cron-t { color: var(--sinal); }
.ad-cron.rodando .ad-cron-b:not(.leve) { background: var(--sinal); border-color: var(--sinal); color: var(--fixa); }
.ad-obj { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--pg-linha); display: grid; gap: .4rem; }
.ad-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ad-j { margin-top: 1rem; }
.ag-jardim-ir { margin-top: .8rem; }

/* ---------- Módulos (rotator na página Agora) ---------- */
.md-mod { display: grid; gap: .8rem; padding: clamp(16px, 2vw, 26px); min-width: 0; }
.md-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
.md-abas { display: flex; gap: .35rem; padding: 3px; border: 1px solid var(--pg-linha); border-radius: var(--raio-p, 999px); }
.md-aba { border: 0; background: transparent; padding: .4rem .9rem; border-radius: var(--raio-p, 999px); font: 500 .8125rem/1 var(--f-display); color: var(--suave); cursor: pointer; }
.md-aba small { font: 600 .68rem/1 var(--f-mono); opacity: .75; margin-left: .3rem; }
.md-aba.on { background: var(--tinta); color: var(--papel); }
.md-faixa-wrap { position: relative; display: flex; align-items: center; gap: .4rem; min-width: 0; }
.md-faixa { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: .3rem .15rem; flex: 1; min-width: 0; scrollbar-width: none; cursor: grab; }
.md-faixa::-webkit-scrollbar { display: none; }
.md-faixa.arrastando { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.md-faixa:focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; }
.md-seta { flex-shrink: 0; align-self: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--pg-linha); border-radius: var(--raio-p, 999px); background: var(--pg-fundo); color: var(--tinta); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.md-seta:hover { background: var(--pg-suave); }
.md-vazio { padding: 1rem; }
.md-c { scroll-snap-align: start; flex: 0 0 auto; width: 11.5rem; min-height: 7.6rem; display: grid; align-content: start; gap: .4rem; text-align: left; padding: .9rem 1rem 1rem; border: 1px solid var(--pg-linha); border-top: 3px solid var(--c, var(--sinal)); border-radius: var(--pg-r); background: var(--pg-fundo); color: var(--tinta); cursor: pointer; font: inherit; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.md-c:hover { transform: translateY(-2px); border-color: var(--c, var(--sinal)); }
.md-nome { font: 600 .95rem/1.25 var(--f-display); }
.md-n { font: 600 .8rem/1 var(--f-mono); }
.md-barra { display: block; height: 4px; border-radius: var(--raio, 2px); background: var(--pg-suave); overflow: hidden; }
.md-barra i { display: block; height: 100%; background: var(--c, var(--sinal)); }
.md-atlas { border-top-color: var(--pg-linha); background-size: cover; background-position: center; position: relative; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.md-atlas.md-com-capa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65)); border-radius: calc(var(--pg-r) - 1px); }
.md-atlas:not(.md-com-capa) { color: var(--tinta); text-shadow: none; }
.md-atlas > * { position: relative; }
.md-vu { font-size: 1.4rem; line-height: 1; }
@media (max-width: 640px) {
  .md-c { width: 9.2rem; }
  .md-seta { width: 2rem; }
}