/* ==========================================================================
   ENTREGÁVEIS EM PASTAS — dos-
   Uma pasta por documento entregue, e o guia que vira a página no clique.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent-ink
                  --accent --dark --light --display --radius-media
                  --radius-pill --ease
   ========================================================================== */

.dos-topo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);
  gap:24px 48px;align-items:end;
}
.dos-lead{margin-top:0}

.dos-grade{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(34px,5vh,52px);
}

/* ---------------------------------------------------------------- as pastas */
.dos-pastas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}

.dos-pasta{
  display:grid;align-content:start;gap:6px;
  padding:clamp(20px,2vw,26px);
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 3%,var(--bg));
}

/* A PASTA DESENHADA: a aba é o ::before e o corpo é a própria caixa. O
   tipo do arquivo (.dos-selo) mora DENTRO da aba, no canto de cima à
   esquerda, que é onde uma pasta de verdade leva a etiqueta. Tudo derivado
   de --fg e --bg, então a pasta segue o escopo. Parada: nada abre no hover
   (§6).

   Não há folhas aparecendo por cima. Houve, num ::after — e sem conteúdo
   nenhum, o retângulo claro no meio da aba lia como defeito de desenho, não
   como papel. Tirado em 2026-09-29, a pedido do dono. */
.dos-desenho{
  position:relative;display:block;
  block-size:clamp(96px,9vw,124px);margin:26px 0 16px;
  border:1px solid var(--rule-2);border-radius:max(6px,var(--radius-media));
  background:color-mix(in srgb,var(--fg) 7%,var(--bg));
}
/* 26px de altura, 24 acima do corpo e 2 por cima da borda dele: é o que
   apaga o filete do corpo debaixo da aba. */
.dos-desenho::before{
  content:"";position:absolute;inset-block-start:-24px;inset-inline-start:-1px;
  inline-size:34%;min-inline-size:64px;block-size:26px;
  border:1px solid var(--rule-2);border-block-end:0;
  border-radius:max(6px,var(--radius-media)) max(6px,var(--radius-media)) 0 0;
  background:color-mix(in srgb,var(--fg) 7%,var(--bg));
}
.dos-selo{
  position:absolute;inset-block-start:-20px;inset-inline-start:10px;z-index:1;
  font-family:var(--display);font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.12em;
  color:var(--bg);background:var(--fg);
  border-radius:var(--radius-pill);padding:4px 8px;
}

.dos-nome{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.6vw,21px);line-height:1.2;letter-spacing:-.015em;color:var(--fg);
}
.dos-qtd{font-size:13.5px;color:var(--fg-2)}
.dos-temas{
  margin-top:10px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
}

/* ---------------------------------------------------------------- o guia */
.dos-guia-slot{display:flex}
.dos-guia{
  flex:1;display:grid;align-content:center;gap:18px;
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 5%,var(--bg));
}
.dos-guia-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dos-guia-rot{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);
}
.dos-guia-conta{font-size:11px;letter-spacing:.12em;color:var(--fg-muted);font-variant-numeric:tabular-nums}

/* A página: um cartão de papel sobre o cartão do guia. A tinta dela é a do
   escopo claro, SEMPRE — papel é papel, mesmo numa dobra escura. Por isso
   ela lê --light e --dark, e não --bg/--fg. */
.dos-paginas{display:grid}
.dos-pagina{
  grid-area:1 / 1;
  display:grid;gap:8px;align-content:start;
  min-block-size:190px;
  padding:clamp(20px,2.2vw,28px);
  border-radius:max(4px,var(--radius-media));
  background:var(--light);color:var(--dark);
  box-shadow:0 18px 40px -18px rgba(var(--dark-rgb),.35);
}
.dos-pagina[hidden]{display:none}
.dos-pagina.is-entrando{animation:dosPagina .55s var(--ease)}
@keyframes dosPagina{
  from{opacity:0;filter:blur(8px)}
  to{opacity:1;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .dos-pagina.is-entrando{animation:none}
}
.dos-pagina-n{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--dark) 55%,var(--light))}
.dos-pagina-t{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,1.9vw,26px);line-height:1.15;letter-spacing:-.02em;
}
.dos-pagina-p{font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--dark) 75%,var(--light))}
/* As linhas de texto de mentira: decoração, fora da árvore de acessibilidade. */
.dos-linhas{
  display:block;block-size:34px;margin-top:6px;
  background:
    linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 0 / 92% 4px no-repeat,
    linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 10px / 78% 4px no-repeat,
    linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 20px / 86% 4px no-repeat,
    linear-gradient(color-mix(in srgb,var(--dark) 12%,var(--light)) 0 0) 0 30px / 54% 4px no-repeat;
}

.dos-guia-apoio{font-size:14px;line-height:1.6;color:var(--fg-2)}
.dos-virar{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg);
  background:none;border:1px solid var(--rule-2);border-radius:var(--radius-pill);
  padding:10px 16px;cursor:pointer;transition:border-color .25s,color .25s;
}
.dos-virar:hover{border-color:var(--accent-ink,var(--accent));color:var(--accent-ink,var(--accent))}
.dos-virar[hidden]{display:none}

.dos-nota{margin-top:20px}

@media(max-width:960px){
  .dos-topo{grid-template-columns:1fr}
  .dos-grade{grid-template-columns:1fr}
}
@media(max-width:520px){
  .dos-pastas{grid-template-columns:1fr}
}